/** Shopify CDN: Minification failed

Line 1069:41 Unexpected "/"

**/
/* ============================================================
 * Learn2Ride — Judge.me brand skin
 * Loaded globally from theme.liquid (NOT pasted into the Judge.me
 * Custom CSS panel — its 500-char limit can't hold this file).
 *
 * NOTE: the popup-widget skin lives further down in section §6
 * (search "POPUP WIDGET"). The popup is the bottom-corner card that
 * surfaces a single recent review on every page — a separate widget
 * from the on-product reviews list, with its own DOM contract
 * (.jdgm-popup-card + .jdgm-full-rev*).
 *
 * Section map:
 *   1. Carousel widget (homepage / PDP carousel embeds)
 *   2. Review widget — reviews page (.jdgm-rev-widg)
 *      2a. Widget header (title, summary stars, summary text,
 *          write-a-review button, histogram)
 *      2b. Sort wrapper
 *      2c. Per-review sticker cards
 *      2d. Per-review internals (header row, body, photos, badges)
 *      2e. Pagination
 *   3. Review form (jdgm-form, when "Write a review" is opened)
 *
 * DOM contract verified live 2026-05-04 via DevTools on
 * /products/learn2ride-reviews (dev theme #185867174195).
 * ============================================================ */


/* ============================================================
 * 1. CAROUSEL WIDGET
 * Used by Judge.me's homepage / PDP carousel embed. Kept for
 * compatibility — the L2R homepage uses our custom
 * l2r-testimonials section instead, but Judge.me may render
 * carousels elsewhere.
 * ============================================================ */

.jdgm-widget,
.jdgm-carousel-wrapper {
  font-family: var(--l2r-text, 'Inter'), system-ui, sans-serif !important;
  color: var(--l2r-ink, #0B0B0B) !important;
}

.jdgm-carousel-title {
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 56px !important;
  line-height: 0.92 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  letter-spacing: 0 !important;
}

.jdgm-carousel-item {
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--l2r-ink, #0B0B0B) !important;
  padding: 24px !important;
  transition:
    transform 180ms cubic-bezier(.34, 1.56, .64, 1),
    box-shadow 180ms ease !important;
}
.jdgm-carousel-item:nth-child(odd)  { transform: rotate(-1.5deg) !important; }
.jdgm-carousel-item:nth-child(even) { transform: rotate( 1.5deg) !important; }
.jdgm-carousel-item:hover {
  transform: rotate(0) scale(1.02) !important;
  box-shadow: 6px 6px 0 var(--l2r-ink, #0B0B0B) !important;
}

.jdgm-carousel-wrapper .jdgm-carousel__arrow {
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  width: 44px !important;
  height: 44px !important;
}
.jdgm-carousel-wrapper .jdgm-carousel__arrow:hover {
  background: var(--l2r-yellow, #FFC617) !important;
}


/* ============================================================
 * 2. REVIEW WIDGET — reviews page
 * Container: .jdgm-rev-widg (inside .jdgm-widget.jdgm-review-widget)
 *
 * Judge.me's default styling paints a thin grey border + 24px
 * padding around the whole widget. We strip that and let the
 * theme's container handle the box.
 * ============================================================ */

.jdgm-rev-widg {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  /* Top margin pushes the summary card down off the navigation bar
   * so it doesn't crash into it. 48px chosen to match the spacing
   * the L2R sections use between page header and first content. */
  margin: 48px auto 0 auto !important;
  max-width: 1100px !important;
  font-family: var(--l2r-text, 'Inter'), system-ui, sans-serif !important;
  color: var(--l2r-ink, #0B0B0B) !important;
}

/* ---- 2a. Widget header ------------------------------------------------- */
/* Header block contains: section title, summary stars + text, "Write a
 * review" button, and a 5-row histogram. We give it its own sticker frame
 * so it reads as a "summary card" above the review list. */

.jdgm-rev-widg__header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 16px !important;
  box-shadow: 4px 4px 0 var(--l2r-ink, #0B0B0B) !important;
  padding: 32px 24px !important;
  margin: 0 0 48px 0 !important;
  text-align: center !important;
}

/* Section title — "PARENT REVIEWS". Override the per-review title sizing
 * that this class accidentally inherited from the carousel rules above. */
.jdgm-rev-widg__title {
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 64px !important;
  line-height: 0.92 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

@media (max-width: 768px) {
  .jdgm-rev-widg__title { font-size: 44px !important; }
}

.jdgm-rev-widg__summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}

/* Summary stars row.
 *
 * Judge.me's HTML stuffs the 5 star spans AND the
 * `.jdgm-rev-widg__summary-average` ("5 out of 5") together as
 * `display: inline` siblings inside this container — so when the
 * column is narrow (~144px in our layout) the rating text wraps
 * onto multiple lines:
 *   ★★★★★ 5 out
 *           of 5
 * To split them cleanly: turn this row into flex with wrapping, then
 * make `.jdgm-rev-widg__summary-average` a block on its own line. */
.jdgm-rev-widg__summary-stars {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: 28px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

/* "5 out of 5" — force onto its own row below the stars, with
 * `flex-basis: 100%` so it wraps to a new line, and `white-space:
 * nowrap` so the text itself doesn't break across lines. */
.jdgm-rev-widg__summary-stars .jdgm-rev-widg__summary-average,
.jdgm-rev-widg__summary-average {
  display: block !important;
  flex-basis: 100% !important;
  width: 100% !important;
  text-align: center !important;
  white-space: nowrap !important;
  margin-top: 10px !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  line-height: 1.2 !important;
}

.jdgm-rev-widg__summary-text {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--l2r-ink-2, #1A1A1A) !important;
  text-align: center !important;
  margin-top: 4px !important;
}

/* Write-a-review CTA — orange sticker pill. */
.jdgm-write-rev-link,
.jdgm-form__submit {
  display: inline-block !important;
  background: var(--l2r-orange, #F28F1F) !important;
  color: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  letter-spacing: 0.04em !important;
  padding: 14px 28px !important;
  box-shadow: 4px 4px 0 var(--l2r-ink, #0B0B0B) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
.jdgm-write-rev-link:hover,
.jdgm-form__submit:hover {
  background: var(--l2r-orange-hover, #E37D0B) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 var(--l2r-ink, #0B0B0B) !important;
  color: var(--l2r-paper, #FFFFFF) !important;
}

/* Histogram — 5 rows of star → bar → percent → frequency.
 * Tighten typography and switch the filled bar to brand orange. */
.jdgm-histogram {
  width: 100% !important;
  max-width: 560px !important;
  margin: 8px 0 0 0 !important;
}

.jdgm-histogram__row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 0 !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 13px !important;
  color: var(--l2r-ink-2, #1A1A1A) !important;
}

.jdgm-histogram__star {
  flex: 0 0 auto !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

.jdgm-histogram__bar {
  flex: 1 1 auto !important;
  background: var(--l2r-stone-100, #EFEFEE) !important;
  border: 1px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  height: 10px !important;
  overflow: hidden !important;
}

.jdgm-histogram__bar-content {
  background: var(--l2r-orange, #F28F1F) !important;
  height: 100% !important;
}

.jdgm-histogram__percentage,
.jdgm-histogram__frequency {
  flex: 0 0 auto !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  color: var(--l2r-ink-2, #1A1A1A) !important;
  min-width: 36px !important;
  text-align: right !important;
}


/* ---- 2b. Sort wrapper / filter / photos-videos gallery — HIDDEN ----------
 * The user explicitly asked to remove (2026-05-04):
 *   - The "Photos & videos" thumbnail strip in the summary card header
 *     (rendered by Judge.me as `.jdgm-gallery-wrapper` + descendants)
 *   - The "MOST RECENT" filter/sort dropdown above the reviews list
 *     (rendered as `.jdgm-rev-widg__sort-wrapper` + the surrounding
 *     filter bar, sometimes wrapped in `.jdgm-rev-widg__filters`)
 *
 * The histogram + write-a-review button stay visible since those are
 * the useful summary callouts. Hiding the gallery saves vertical space
 * (it was showing 7 thumbnails in a strip) and the filter UI was
 * largely cosmetic — visitors don't usually re-sort review feeds.
 *
 * If at some point you want either back, change `display: none` to
 * `display: flex` (sort wrapper) or `display: block` (gallery wrapper)
 * — the previous styling is preserved in the comment block below.
 */

/* "Photos & videos" thumbnail strip in the header */
.jdgm-gallery-wrapper,
.jdgm-rev-widg .jdgm-gallery,
.jdgm-rev-widg .jdgm-gallery-data,
.jdgm-rev-widg .jdgm-gallery-title {
  display: none !important;
}

/* "MOST RECENT" sort/filter row above the reviews list. Hide the
 * wrapper plus any siblings that share the filter bar (Judge.me
 * sometimes renders search input + sort dropdown side-by-side).
 *
 * NOTE: `.jdgm-rev-widg__actions` is a separate Judge.me wrapper
 * (NOT the per-review .jdgm-rev__actions) that holds the filter UI
 * with its own white background + soft drop shadow. Hiding only the
 * sort dropdown left this wrapper as an empty 16px-tall white pill
 * floating between the summary card and the reviews list — visible
 * to the user as an "empty box with drop shadow". Hide the whole
 * wrapper so it collapses out of flow. */
.jdgm-rev-widg__sort-wrapper,
.jdgm-rev-widg__filters,
.jdgm-rev-widg__filter-buttons,
.jdgm-rev-widg__actions {
  display: none !important;
}

/* Previous sort-pill styling preserved for reference — uncomment if
 * you reactivate the sort wrapper later.
 *
 * .jdgm-rev-widg__sort-wrapper {
 *   display: flex !important;
 *   justify-content: flex-end !important;
 *   margin: 0 0 24px 0 !important;
 * }
 * .jdgm-rev-widg__sort-wrapper select,
 * .jdgm-rev-widg__sort {
 *   background: var(--l2r-ink) !important;
 *   color: var(--l2r-paper) !important;
 *   border: 2px solid var(--l2r-ink) !important;
 *   border-radius: 999px !important;
 *   font-family: var(--l2r-text) !important;
 *   font-weight: 700 !important;
 *   font-size: 13px !important;
 *   letter-spacing: 0.04em !important;
 *   text-transform: uppercase !important;
 *   padding: 8px 32px 8px 14px !important;
 *   cursor: pointer !important;
 *   -webkit-appearance: none !important;
 *   appearance: none !important;
 * }
 */


/* ---- 2c. Per-review sticker cards -------------------------------------- */
/* Each .jdgm-rev becomes a paper sticker card with ink outline +
 * solid-ink shadow. We give each card a slight rotation that varies
 * by position — cycles every 5 cards (Judge.me paginates 5/page). */

.jdgm-rev-widg__body {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Reviews list — 3 cards per row on desktop. With 5 reviews per page
 * (Judge.me's default), the layout flows as 3-up + 2 + (one empty
 * trailing cell). At < 1100px wraps to 2-up; under 768px collapses
 * to a single column.
 *
 * Important — overriding Judge.me's masonry:
 * When the Judge.me app embed is enabled, their JS converts the
 * reviews list into a Pinterest-style masonry layout by:
 *   - Setting `position: absolute; left: 0; top: 0` on every .jdgm-rev
 *   - Adding `transform: translate3d(Xpx, Ypx, 0)` to each one
 *   - Setting an explicit `height` on .jdgm-rev-widg__reviews to fit
 *     the calculated absolute children
 *   - Setting `position: relative` on the parent
 * That layout defeats CSS Grid (absolute children are out of flow)
 * and clobbers our card rotations (transform is now a translate, not
 * a rotate). The rules below override Judge.me's inline styles to
 * restore CSS Grid + sticker tilts. We use a high-specificity
 * selector + !important since their inline styles are otherwise
 * unbeatable.
 */
.jdgm-rev-widg .jdgm-rev-widg__reviews {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  /* `align-items: start` lets each card size to its own content height
   * — the bottom border of every card hugs its content rather than
   * stretching to match the tallest card in the row. Cells in the
   * grid track may have visible empty space below shorter cards
   * (because the row track sizes to the tallest card), but that space
   * sits OUTSIDE the card border, not inside.
   *
   * `justify-items: stretch` is kept as defensive belt-and-braces —
   * makes sure each card fills its column horizontally even if a
   * Judge.me CSS rule tries to compute `justify-self: start` on one. */
  align-items: start !important;
  justify-items: stretch !important;
  /* Override Judge.me's calculated absolute-positioning height. */
  height: auto !important;
  min-height: 0 !important;
  position: static !important;
}

@media (max-width: 1100px) {
  .jdgm-rev-widg .jdgm-rev-widg__reviews {
    /* 2-up at tablet; collapses to 1-up on phone via the @media
     * (max-width: 768px) block further down (Marco asked
     * 2026-05-08 — was 2-up all the way down to 768px previously). */
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .jdgm-rev-widg .jdgm-rev-widg__reviews {
    grid-template-columns: 1fr !important;
  }
}

/* Card box. Scoped to .jdgm-rev-widg so the floating-tab widget's
 * hidden duplicate review DOM (`.jdgm-revs-tab__wrapper .jdgm-rev`)
 * doesn't get sticker styling — those are display:none anyway, but
 * scoping is cleaner. */
.jdgm-rev-widg .jdgm-rev {
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--l2r-ink, #0B0B0B) !important;
  padding: 22px !important;
  margin: 0 !important;
  /* Override Judge.me's masonry positioning + float — back to normal
   * flow inside the CSS grid:
   *   - position: static     (their inline `position: absolute` had
   *                           taken cards out of flow)
   *   - float: none          (their CSS `float: left` was shrinking
   *                           cards to content width inside the grid,
   *                           making them ~105px wide instead of 348px)
   *   - width / min-width / max-width   (lock the card to its grid
   *                           cell. min-width: 0 prevents content
   *                           from forcing a wider track than 1fr,
   *                           and the explicit 100% / max-width pair
   *                           guarantees the card fills the cell even
   *                           if a Judge.me JS rule sets a content-
   *                           dependent width on a single card —
   *                           addresses the "middle card narrower than
   *                           neighbours" bug some browsers showed.)
   */
  position: static !important;
  float: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  left: auto !important;
  top: auto !important;
  /* Flex-column on the card itself so child blocks (header, pics,
   * content, actions, reply) flow vertically. */
  display: flex !important;
  flex-direction: column !important;
  /* Defensive: explicitly self-align to fill the grid cell horizontally
   * — but `align-self: start` lets card height collapse to content. */
  justify-self: stretch !important;
  align-self: start !important;
  box-sizing: border-box !important;
  transition: transform 180ms cubic-bezier(.34, 1.56, .64, 1),
              box-shadow 180ms ease !important;
}

/* Six-card rotation cycle covers a 3-up grid with 5 reviews per page
 * and gives each card a unique tilt position-by-position.
 *
 * Note: rotations are inside the grid (each card occupies a real
 * grid cell), but Judge.me's JS sets `transform: translate3d(...)`
 * inline on each .jdgm-rev. Our `transform: rotate()` !important
 * beats their inline value because (a) higher specificity via
 * `.jdgm-rev-widg` parent and (b) explicit !important. */
.jdgm-rev-widg .jdgm-rev:nth-child(6n+1) { transform: rotate(-1.0deg) !important; }
.jdgm-rev-widg .jdgm-rev:nth-child(6n+2) { transform: rotate( 0.7deg) !important; }
.jdgm-rev-widg .jdgm-rev:nth-child(6n+3) { transform: rotate(-0.5deg) !important; }
.jdgm-rev-widg .jdgm-rev:nth-child(6n+4) { transform: rotate( 0.9deg) !important; }
.jdgm-rev-widg .jdgm-rev:nth-child(6n+5) { transform: rotate(-0.8deg) !important; }
.jdgm-rev-widg .jdgm-rev:nth-child(6n+6) { transform: rotate( 0.4deg) !important; }

.jdgm-rev-widg .jdgm-rev:hover {
  transform: rotate(0) scale(1.02) !important;
  box-shadow: 6px 6px 0 var(--l2r-ink, #0B0B0B) !important;
  z-index: 2 !important;
}

/* Judge.me applies the .jdgm-divider-top class to each .jdgm-rev (so it's
 * the SAME element, not a descendant). Their default rule is:
 *   border-top: 1px solid #ccc; padding-top: 16px;
 * Our `border: 2px solid ink` shorthand above already wins over the
 * 1px top border, so we don't need to fight it explicitly. (An earlier
 * version of this file used `.jdgm-rev.jdgm-divider-top { border-top: 0 }`
 * to do that, which accidentally stripped the card's own top outline —
 * since the compound selector targets the card itself, not a child.) */


/* ---- 2d. Per-review internals ----------------------------------------- */

/* Header row layout (after restyle):
 *   [NAME PILL] [stars] [...timestamp] [verified pill]
 *
 * The default Judge.me avatar circle (.jdgm-rev__icon) is hidden;
 * the parent's name takes its place on the left as a yellow sticker
 * pill, styled in Barlow Condensed Black Italic UPPERCASE to match
 * the original avatar's letter style. Location is hidden entirely
 * because Judge.me only ships country (everyone is "(United States)")
 * — no state-level data to surface. */
.jdgm-rev__header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px 0 !important;
}

/* Hide the default avatar disc — replaced by the name pill below. */
.jdgm-rev__icon {
  display: none !important;
}

/* Star rating — orange via the global .jdgm-star rules. */
.jdgm-rev__rating {
  font-size: 16px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Author wrapper now contains only the name (location hidden). */
.jdgm-rev__author-wrapper {
  display: inline-flex !important;
  margin: 0 !important;
  /* This wrapper is the yellow pill — see styling below. We tilt it
   * slightly so it reads as a sticker stuck to the card's corner. */
}

/* The actual name element. */
.jdgm-rev__author {
  display: inline-block !important;
  background: var(--l2r-yellow, #FFC617) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  padding: 4px 12px 5px 12px !important;
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  letter-spacing: 0.02em !important;
  transform: rotate(-2deg) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

/* Location — hidden globally. Judge.me only renders the country
 * ("(United States)") and the user requested it stay off until we
 * can show state-level data. */
.jdgm-rev__location {
  display: none !important;
}

/* Timestamp — Judge.me renders this with a font-size:0 default and
 * injects relative time text via JS. Style as small meta text. */
.jdgm-rev__timestamp {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--l2r-stone-500, #7A7A75) !important;
  margin-left: auto !important;
  /* Push to right edge of the flex header */
}

/* Verified-buyer badge — ink pill on the right side of the header.
 * This is the actual class (NOT .jdgm-rev__verified-badge, which
 * doesn't exist; an earlier version of this file targeted that). */
.jdgm-rev__buyer-badge-wrapper {
  display: inline-flex !important;
  align-items: center !important;
}

.jdgm-rev__buyer-badge {
  display: inline-block !important;
  background: var(--l2r-ink, #0B0B0B) !important;
  color: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 3px 10px !important;
  margin: 0 !important;
}

/* Review content — title and body. */
.jdgm-rev__content {
  margin: 0 !important;
}

.jdgm-rev__title {
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  letter-spacing: 0 !important;
  margin: 0 0 8px 0 !important;
}

.jdgm-rev__body {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  color: var(--l2r-ink-2, #1A1A1A) !important;
  margin: 0 0 16px 0 !important;
}

/* Photos strip — auto-fit grid so multiple photos share the card width
 * evenly (1 photo = full row, 2 photos = 50/50, 3+ photos = wrap into
 * rows at 220px min). Each photo gets a sticker frame (2px ink border
 * + small solid shadow) so it reads as the same idiom as the cards.
 *
 * `aspect-ratio: 4/3` on the link wrapper keeps photos a consistent
 * height regardless of the source image proportions — combined with
 * the imgix `crop=faces,entropy` transform applied in judgeme-fix.js,
 * this delivers a clean 4:3 face-focused thumbnail. */
.jdgm-rev__pics {
  display: grid !important;
  /* Auto-fit with a 110px min — at the new narrower 3-up card width
   * (~340px wide, ~296px content), this lets:
   *   1 photo  → fills the column 1fr (full content width)
   *   2 photos → 50/50 split
   *   3 photos → 3-up packed
   * Empty trailing cells collapse to 0 (`auto-fit`). */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important;
  gap: 8px !important;
  margin: 10px 0 14px 0 !important;
}

.jdgm-rev__pic-link {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  /* `height: auto` is essential — Judge.me's default CSS sets a fixed
   * height on .jdgm-rev__pic-link (~100px), and an explicit `height`
   * value beats `aspect-ratio` per spec. Without this clear, photos
   * collapse to a 100-120px tall strip even though aspect-ratio is set. */
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--l2r-ink, #0B0B0B) !important;
  overflow: hidden !important;
  background: var(--l2r-bone, #F6F6F5) !important;
  transition: transform 180ms ease, box-shadow 180ms ease !important;
}

.jdgm-rev__pic-link:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--l2r-ink, #0B0B0B) !important;
}

.jdgm-rev__pic-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
}

/* Videos block — Judge.me always renders an empty .jdgm-rev__vids
 * scaffold + a stuck .jdgm-vid-player.jdgm--loading placeholder, even
 * on reviews with no video. Without this rule, every review sprouts a
 * 256px-tall blank box below the photos. We keep the container in
 * flow but collapse it when no actual <video>/<iframe> child exists,
 * and explicitly hide the stuck loading shell. */
.jdgm-rev__vids:not(:has(video)):not(:has(iframe)) {
  display: none !important;
}

.jdgm-vid-player.jdgm--loading,
.jdgm-vid-player__wrapper.jdgm--loading {
  display: none !important;
}

/* Transparency badge wrapper — Judge.me always renders an empty
 * .jdgm-rev__transparency-badge-wrapper > .jdgm-rev__transparency-badge
 * pair on every review (h=0 but with 12px top margin = invisible
 * spacer that bumps every card 12px taller for no reason). The
 * default Judge.me display setting hides the badge content, but the
 * wrappers stay. Force-collapse both. */
.jdgm-rev__transparency-badge-wrapper,
.jdgm-rev__transparency-badge {
  display: none !important;
}

/* Custom form scaffold — same pattern, empty <div> with 16px top+bottom
 * margins that adds 32px of dead space inside .jdgm-rev__content. We
 * don't render any custom Q&A here, so collapse it. */
.jdgm-rev__custom-form {
  display: none !important;
}

/* Transparency badge ("3 months ago" / verified-via-judge.me etc.)
 * — keep but make it small and unobtrusive. */
.jdgm-rev__transparency-badge-wrapper {
  display: block !important;
  margin: 12px 0 0 0 !important;
}

.jdgm-rev__transparency-badge {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 11px !important;
  color: var(--l2r-stone-500, #7A7A75) !important;
  text-decoration: none !important;
}

/* Action row (helpful votes, share). Subtle, ink-on-bone. */
.jdgm-rev__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 16px 0 0 0 !important;
  padding: 12px 0 0 0 !important;
  border-top: 1px solid var(--l2r-stone-200, #D9D9D6) !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 12px !important;
  color: var(--l2r-stone-500, #7A7A75) !important;
}

.jdgm-rev__votes {
  display: inline-flex !important;
  gap: 8px !important;
  align-items: center !important;
}

.jdgm-rev__social {
  display: inline-flex !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Admin reply — "FROM THE COACH" sticker callout.
 *
 * Renders as a yellow sticker block with a fat ink border + drop shadow,
 * tucked inside the review card. A "FROM THE COACH" header is injected
 * via ::before so we don't touch Judge.me's HTML.
 *
 * Real Judge.me reply HTML structure (verified live 2026-05-04):
 *   <div class="jdgm-rev__reply">
 *     <div class="jdgm-rev__replier-wrapper">
 *       <b class="jdgm-rev__replier"></b>      ← almost always empty
 *     </div>
 *     <div class="jdgm-rev__reply-content">
 *       <p>...reply text...</p>                ← actual reply body
 *     </div>
 *   </div>
 *
 * Earlier versions of this file targeted .jdgm-rev__reply-author /
 * .jdgm-rev__reply-body — those classes don't exist in real replies
 * (they came from a JS test injection during dev). The real classes
 * are .jdgm-rev__replier(-wrapper) for the author label and
 * .jdgm-rev__reply-content for the body.
 *
 * Important: Judge.me always renders an EMPTY .jdgm-rev__reply div on
 * every review (even ones with no reply), then injects the children
 * above only when a reply actually exists. The :has() guard limits the
 * sticker treatment to reply containers with real content — without it
 * every review sprouts a giant yellow box.
 *
 * Browser support: :has() is supported in Chrome 105+, Safari 15.4+,
 * Firefox 121+ — covers >95% of L2R traffic. Browsers without :has()
 * fall back to display:none on this element (the default), which is
 * preferable to showing an unstyled bare reply. */
.jdgm-rev__reply { display: none !important; }

.jdgm-rev__reply:has(.jdgm-rev__reply-content),
.jdgm-rev__reply:has(*) {
  display: block !important;
  position: relative !important;
  background: var(--l2r-yellow, #FFC617) !important;
  border: 3px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--l2r-ink, #0B0B0B) !important;
  padding: 14px 18px 14px 18px !important;
  margin: 18px 0 0 0 !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
}

/* "FROM THE COACH" header injected before the reply content. Slight
 * upward tilt so it reads like a stamp pinned to the sticker. */
.jdgm-rev__reply:has(*)::before {
  content: "FROM THE COACH";
  display: inline-block;
  background: var(--l2r-ink, #0B0B0B);
  color: var(--l2r-paper, #FFFFFF);
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px 4px 10px;
  border-radius: 999px;
  margin: 0 0 10px 0;
  transform: rotate(-2deg);
  position: relative;
  top: -2px;
}

/* Replier wrapper — Judge.me's container for the shop name. Almost
 * always renders as <div><b></b></div> with no replier set. The wrapper
 * has default whitespace + line-height that adds extra vertical space
 * inside the reply (this is the "Amy's response has extra padding"
 * symptom). The FROM THE COACH pill already labels the block, so hide
 * the wrapper entirely.
 *
 * If at some point the user starts setting an explicit replier name
 * in Judge.me admin and wants it visible, swap `display: none` to
 * `display: block` and uncomment the styling block below. */
.jdgm-rev__replier-wrapper {
  display: none !important;
}

/*
.jdgm-rev__replier {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  opacity: 0.7 !important;
  margin: 0 0 6px 0 !important;
  display: block !important;
}
*/

/* Reply body — Judge.me wraps this in <div class="jdgm-rev__reply-content">
 * containing one or more <p> tags. The default <p> margins are 1em top
 * and bottom (~14px each), which doubles the visual padding inside the
 * sticker. We zero them out so the sticker padding alone controls
 * spacing. */
.jdgm-rev__reply-content {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  margin: 0 !important;
}

.jdgm-rev__reply-content p {
  margin: 0 0 8px 0 !important;
}
.jdgm-rev__reply-content p:last-child {
  margin-bottom: 0 !important;
}


/* ---- 2e. Pagination ---------------------------------------------------- */

.jdgm-paginate {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 32px 0 0 0 !important;
}

.jdgm-paginate__page,
.jdgm-paginate__next-page,
.jdgm-paginate__prev-page,
.jdgm-paginate__last-page,
.jdgm-paginate__first-page {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 12px !important;
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  cursor: pointer !important;
  transition: background 180ms ease, transform 180ms ease !important;
  text-decoration: none !important;
}

.jdgm-paginate__page:hover,
.jdgm-paginate__next-page:hover,
.jdgm-paginate__prev-page:hover {
  background: var(--l2r-yellow, #FFC617) !important;
  transform: translate(-1px, -1px) !important;
}

.jdgm-paginate__page.jdgm-curt,
.jdgm-paginate__page.jdgm--current {
  background: var(--l2r-ink, #0B0B0B) !important;
  color: var(--l2r-paper, #FFFFFF) !important;
}


/* ============================================================
 * 3. STARS — universal
 * Used in the carousel, the per-review header, the summary block,
 * and the histogram star labels.
 * ============================================================ */

.jdgm-star.jdgm--on,
.jdgm-star {
  color: var(--l2r-orange, #F28F1F) !important;
}

.jdgm-star.jdgm--off {
  color: var(--l2r-stone-200, #D9D9D6) !important;
}


/* ============================================================
 * 4. REVIEW FORM
 * Shown when user clicks "Write a review". Inputs + submit.
 * ============================================================ */

.jdgm-form__title {
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 32px !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  margin: 0 0 16px 0 !important;
}

.jdgm-form input[type="text"],
.jdgm-form input[type="email"],
.jdgm-form textarea {
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 8px !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.jdgm-form input[type="text"]:focus,
.jdgm-form input[type="email"]:focus,
.jdgm-form textarea:focus {
  outline: 0 !important;
  box-shadow: 2px 2px 0 var(--l2r-ink, #0B0B0B) !important;
}


/* ============================================================
 * 5. MOBILE TWEAKS
 * Reviews-page widget at narrow widths.
 * ============================================================ */

@media (max-width: 768px) {
  /* Single-column reviews list — 3-up review grid is too tight on
   * phones, drop to one card per row. */
  .jdgm-rev-widg__reviews {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .jdgm-rev {
    padding: 20px !important;
  }

  /* Back off rotations slightly on mobile so cards don't crash into
   * the viewport edges. Same 6-cycle pattern as desktop, scaled down. */
  .jdgm-rev:nth-child(6n+1) { transform: rotate(-0.7deg) !important; }
  .jdgm-rev:nth-child(6n+2) { transform: rotate( 0.5deg) !important; }
  .jdgm-rev:nth-child(6n+3) { transform: rotate(-0.4deg) !important; }
  .jdgm-rev:nth-child(6n+4) { transform: rotate( 0.6deg) !important; }
  .jdgm-rev:nth-child(6n+5) { transform: rotate(-0.5deg) !important; }
  .jdgm-rev:nth-child(6n+6) { transform: rotate( 0.3deg) !important; }

  .jdgm-rev-widg__header {
    padding: 24px 16px !important;
    margin: 0 0 32px 0 !important;
  }

  .jdgm-rev__header {
    gap: 8px !important;
  }

  .jdgm-rev__timestamp {
    /* On a narrow card the timestamp floating right wraps weirdly —
     * let it sit naturally in the flex flow. */
    margin-left: 0 !important;
  }

  .jdgm-paginate__page,
  .jdgm-paginate__next-page,
  .jdgm-paginate__prev-page,
  .jdgm-paginate__last-page,
  .jdgm-paginate__first-page {
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}


/* ============================================================
 * 6. POPUP WIDGET (bottom-corner review card)
 *
 * Position-pin the popup to the bottom-left corner. Judge.me's JS
 * is supposed to set `position: fixed` on `.jdgm-popup-widget-
 * wrapper` to anchor the popup, but that init step doesn't fire
 * reliably on the L2R dev theme — verified live 2026-05-07: wrapper
 * was at `position: static` sitting at viewport y=9611 (end of
 * document), invisible. Forcing `position: fixed` here makes the
 * popup show in the corner regardless of Judge.me's JS state.
 *
 * If Judge.me ever fixes their init or you switch to a different
 * popup-position setting in their admin (top-right etc.), update
 * the inset values here. */

.jdgm-popup-widget-wrapper {
  position: fixed !important;
  bottom: 20px !important;
  left: 20px !important;
  right: auto !important;
  top: auto !important;
  z-index: 9999 !important;
  width: auto !important;
  height: auto !important;
}

/* Hide the wrapper if no cards are currently surfaced (Judge.me
 * sets all cards to display:none until ready, leaving an empty
 * positioned shell). */
.jdgm-popup-widget-wrapper:not(:has(.jdgm-popup-card[style*="display: block"])):not(:has(.jdgm-popup-card[style*="display:block"])) {
  /* no-op — let Judge.me handle visibility internally; this
   * conditional is only for completeness, the wrapper is harmless
   * even if empty since the cards inside are display:none */
}

 *
 * The Judge.me Pop-up Widget app embed surfaces a single review as
 * a small card pinned to the bottom-left/right of the page. Default
 * Judge.me styling is generic white-card-grey-border — re-skin to
 * match the L2R sticker idiom (paper card, ink border, drop shadow,
 * yellow Barlow Condensed accents).
 *
 * DOM contract (verified live 2026-05-07):
 *   .jdgm-popup-widget                   wrapper (positioned by JS)
 *     .jdgm-popup-card                   the actual card box
 *       .jdgm-popup-card__close-btn      "×" close button
 *       .jdgm-full-rev                   review content
 *         .jdgm-full-rev__header
 *           .jdgm-full-rev__icon         avatar circle
 *           .jdgm-full-rev__rating       stars
 *           .jdgm-full-rev__timestamp
 *           .jdgm-full-rev__profile-wrapper
 *             .jdgm-full-rev__reviewer-name
 *             .jdgm-full-rev__location
 *         .jdgm-full-rev__title          review title (h-tag)
 *         .jdgm-full-rev__body           review body
 *         .jdgm-full-rev__pics .jdgm-full-rev__pic-img
 *         .jdgm-full-rev__product-wrapper
 *           .jdgm-full-rev__product-button   "View product"
 *       .jdgm-popup-card__full-rev-link  "Read more" link
 * ============================================================ */

/* Card itself — paper sticker, ink border, ink drop shadow.
 *
 * IMPORTANT: do NOT override `display` here. Judge.me's popup
 * controller toggles `display: none/block` to show one card at a
 * time. An earlier version of this rule used `display: grid
 * !important` to force a 2-column layout (photo left, content
 * right) — that broke Judge.me's hide logic and rendered ALL of
 * the cached review cards on screen at once. Verified live
 * 2026-05-07: 5 popup cards visible simultaneously, no positioning,
 * no images. Reverted to letting Judge.me handle layout/visibility;
 * we just paint sticker chrome on top.
 *
 * Same applies to `position` — Judge.me sets `position: fixed` on
 * the wrapper so the popup pins to the screen corner. Don't fight it. */
.jdgm-popup-card {
  background: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 0 var(--l2r-ink, #0B0B0B) !important;
  padding: 16px !important;
  font-family: var(--l2r-text, 'Inter'), system-ui, sans-serif !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  overflow: hidden !important;
  /* slight tilt for sticker feel */
  transform: rotate(-1deg) !important;
  /* Don't touch display, position, grid-template-columns, min-width
   * — Judge.me's JS controls those. */
}

.jdgm-popup-card:hover {
  transform: rotate(0) !important;
  box-shadow: 6px 6px 0 var(--l2r-ink, #0B0B0B) !important;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Close button (×) — black ink pill, top-right of card.
 *
 * Judge.me ships the close button as an empty <button>, no inner
 * text or SVG, so we paint the × via a `background-image` SVG
 * (more reliable than ::before content because Judge.me's CSS may
 * suppress pseudo content). White multiplication-sign on the dark
 * pill, swaps to white-on-orange on hover. */
.jdgm-popup-card__close-btn {
  background-color: var(--l2r-ink, #0B0B0B) !important;
  color: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-paper, #FFFFFF) !important;
  border-radius: 999px !important;
  width: 28px !important;
  height: 28px !important;
  cursor: pointer !important;
  padding: 0 !important;
  z-index: 10 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: 2px 2px 0 var(--l2r-ink, #0B0B0B) !important;
  /* Inline SVG of an X stroke, white, centered. Sized 14×14 inside
   * the 28-px button gives a clean target. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><line x1='2' y1='2' x2='12' y2='12' stroke='white' stroke-width='2.4' stroke-linecap='round'/><line x1='12' y1='2' x2='2' y2='12' stroke='white' stroke-width='2.4' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px 14px !important;
}

.jdgm-popup-card__close-btn:hover {
  background-color: var(--l2r-orange, #F28F1F) !important;
  border-color: var(--l2r-paper, #FFFFFF) !important;
}

/* Review header inside popup — avatar + name + stars + timestamp */
.jdgm-full-rev__header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 10px 0 !important;
  flex-wrap: wrap !important;
}

.jdgm-full-rev__icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  background: var(--l2r-yellow, #FFC617) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  text-transform: uppercase !important;
  flex-shrink: 0 !important;
}

.jdgm-full-rev__profile-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

.jdgm-full-rev__reviewer-name,
.jdgm-full-rev__reviewer-wrapper {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--l2r-ink, #0B0B0B) !important;
}

.jdgm-full-rev__location,
.jdgm-full-rev__location-wrapper {
  /* Hide location like we do on the reviews page — Judge.me only
   * has country granularity ("(United States)"), reads as noise. */
  display: none !important;
}

.jdgm-full-rev__rating {
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
}

.jdgm-full-rev__rating_and_timestamp_wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.jdgm-full-rev__timestamp {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 11px !important;
  color: var(--l2r-stone-500, #7A7A75) !important;
  font-weight: 400 !important;
}

/* Review title — Barlow Condensed Italic, smaller than reviews-page */
.jdgm-full-rev__title {
  font-family: var(--l2r-display, 'Barlow Condensed'), sans-serif !important;
  font-style: italic !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  margin: 0 0 6px 0 !important;
}

/* Review body */
.jdgm-full-rev__body {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--l2r-ink-2, #1A1A1A) !important;
  margin: 0 0 10px 0 !important;
  /* Clamp very long bodies in a popup — keep card compact */
  display: -webkit-box !important;
  -webkit-line-clamp: 4 !important;
  line-clamp: 4 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Pics block — keep the default Judge.me layout (in-flow below the
 * body), but make the first photo bigger + sticker-framed. Hide
 * additional photos so the popup doesn't get cluttered.
 *
 * (An earlier version of this rule absolutely-positioned `.jdgm-full-
 * rev__pics` to fill the left side of the popup as a 1:1 column. That
 * worked on cards WITH photos but broke Judge.me's per-card display
 * toggling — verified 2026-05-07: 5 cards visible, no images. Reverted
 * to in-flow with bigger size; user asked for "fill the height" but
 * the more robust solution is "show prominently within the card and
 * let Judge.me handle the rest".) */
.jdgm-full-rev__pics {
  display: flex !important;
  gap: 6px !important;
  margin: 10px 0 !important;
  flex-wrap: wrap !important;
  padding: 0 !important;
}

.jdgm-full-rev__pic-link {
  display: inline-block !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  width: 120px !important;
  height: 120px !important;
  flex: 0 0 auto !important;
}

/* Hide additional photos beyond the first — popup is space-
 * constrained, only feature one prominent image. */
.jdgm-full-rev__pics .jdgm-full-rev__pic-link:not(:first-child) {
  display: none !important;
}

.jdgm-full-rev__pic-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Hide videos in popup — not enough space, makes the card tall */
.jdgm-full-rev__vids {
  display: none !important;
}

/* "View product" button — orange sticker pill, like our CTA pattern */
.jdgm-full-rev__product-wrapper {
  margin: 8px 0 0 0 !important;
}
.jdgm-full-rev__product-button {
  display: inline-block !important;
  background: var(--l2r-orange, #F28F1F) !important;
  color: var(--l2r-paper, #FFFFFF) !important;
  border: 2px solid var(--l2r-ink, #0B0B0B) !important;
  border-radius: 999px !important;
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 6px 14px !important;
  text-decoration: none !important;
  box-shadow: 2px 2px 0 var(--l2r-ink, #0B0B0B) !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
.jdgm-full-rev__product-button:hover {
  background: var(--l2r-orange-hover, #E37D0B) !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--l2r-ink, #0B0B0B) !important;
}

/* "Read more" link below review */
.jdgm-popup-card__full-rev-link {
  font-family: var(--l2r-text, 'Inter'), sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--l2r-ink, #0B0B0B) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  margin: 8px 0 0 0 !important;
  display: inline-block !important;
}
.jdgm-popup-card__full-rev-link:hover {
  color: var(--l2r-orange, #F28F1F) !important;
}

/* Reply nest (when a coach replied to the popup-shown review) —
 * small bone-toned secondary block, not the big yellow FROM THE
 * COACH treatment we use on the reviews page. The popup is
 * intentionally compact. */
.jdgm-full-rev__reply {
  background: var(--l2r-bone, #F6F6F5) !important;
  border-left: 3px solid var(--l2r-yellow, #FFC617) !important;
  padding: 8px 10px !important;
  margin: 8px 0 0 0 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  border-radius: 4px !important;
}
.jdgm-full-rev__replier-wrapper {
  display: none !important;  /* empty <b> usually, hide */
}
.jdgm-full-rev__reply-content p { margin: 0 !important; }

/* Custom-form scaffold (Judge.me Q&A) — same as reviews page, hide */
.jdgm-full-rev__custom-form {
  display: none !important;
}