/** Shopify CDN: Minification failed

Line 1118:0 Unexpected "{"
Line 1118:1 Expected identifier but found "%"

**/
/* And Then Some: the shared reviews block.
   ⚠️ MOVED OUT OF sections/ats-reviews.liquid's {% stylesheet %} BLOCK ON
   20 AUGUST 2026, when snippets/ats-reviews-block.liquid became shared between
   the reviews page and the product pages. A stylesheet block compiles only for
   the section that owns it, so the PDP would have rendered the markup unstyled.
   Same fault as the Klarna drawer, which carried 16 matching rules on a product
   page and 7 on the cart.

   IT IS A NEW ASSET rather than an addition to assets/and-then-some.css because
   that file is at 98KB against Theme Check's 100KB AssetSizeCSS threshold.

   ⚠️ IT IS LINKED FROM THE SECTIONS, SO IT LANDS IN THE BODY, WHICH MAKES IT
   THE LAST STYLESHEET IN THE DOCUMENT. Measured on a served product page: the
   head sheets run from base.css at byte 2,853 to compiled_assets/styles.css at
   66,583, and this file sits at 798,940. That is stronger than its old position
   rather than weaker, because it now also beats every section stylesheet block.
   Nothing else in the theme declares a `.rv-` rule and ats-judgeme.css only
   scopes `.jdgm-` rules under `.ats-reviews`, both checked by grep, so nothing
   of ours is overridden by the move.

   THE CONSEQUENCE FOR A CALLER: a section that wants to restyle this block
   cannot do it at equal specificity from its own stylesheet block, because that
   block loads earlier. sections/ats-pdp-reviews.liquid doubles its class for
   exactly this reason, and its comment records the measurement.

   Do not write a Liquid tag in here: this is a static asset and Liquid is
   never evaluated in it. */

/* PAGE SHELL ONLY, scoped under .ats-reviews. sections/ats-reviews.liquid is
   the only thing that can put .rv-* markup on a page, so this belongs here.

   The theming of Judge.me's own jdgm- classes is NOT here. It lives in
   assets/and-then-some.css, because Judge.me is installed site wide and the
   same classes can appear on any surface, and because a stylesheet block
   compiles into compiled_assets/styles.css which Judge.me's own stylesheet
   still loads after. See the note in that file.

   Do not write a Liquid tag in here, not even inside a comment: the checker
   parses the block as static CSS and reads one as real. */

.ats-reviews {
  display: block;
}

/* 1400px, wider than the 960px content pages, because the review grid is three
   across. Straight from the concept. */
.ats-reviews .rv-wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 76px 28px 96px;
}

.ats-reviews .rv-head {
  text-align: center;
}

/* 28px here against the 26px the other content pages use, again the concept.

   ⚠️ h2 IS LISTED BESIDE h1 SO THE PRODUCT PAGE GETS THE SAME HEAD, RATHER THAN
   A PARALLEL SET OF RULES. sections/ats-pdp-reviews.liquid must use an h2,
   because the product title owns the h1, and it used to restate this whole
   block at its own size. Two declarations of one design is how they drift, so
   the selector was widened instead: the reviews page has no h2 in its head, so
   nothing there changed. If a third surface ever needs a different SIZE, that
   is the moment to reconsider, not before. */
.ats-reviews .rv-head h1,
.ats-reviews .rv-head h2 {
  font-size: 28px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  color: var(--ink);
}

.ats-reviews .rv-head p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
  margin: 16px 0 0;
}

/* The concept opens the summary with a full width hairline 48px under the head.
   The widget supplies everything below that line, so the line itself is ours. */
.ats-reviews .rv-slot {
  margin-top: 48px;
  border-top: 1px solid var(--line);
}

/* Only the empty state is a panel. A live widget lays itself out on the page,
   which is what the concept shows. */
.ats-reviews .rv-slot--empty {
  border: 1px solid var(--line);
  background: var(--fill);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px;
}

.ats-reviews .rv-ph__label {
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.ats-reviews .rv-ph__note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 10px;
  max-width: 420px;
  line-height: 1.6;
}

/* ==========================================================================
   THE SELF-RENDERED REVIEWS UI
   --------------------------------------------------------------------------
   Ported from _design-source/html/reviews.html, value for value. This is OUR
   markup now, driven by the ats.reviews metafield, so unlike every previous
   pass at this page there is nothing to out-specify and not one !important.
   The widget CSS further down stays for the fallback state.

   ⚠️ .lbl IS ALSO USED BY ats-home-banner AND ats-home-hero. It is only ever
   written here as `.rv-bar .lbl`, and the whole file is scoped under
   .ats-reviews, so the two cannot meet. Do not lift it to a bare .lbl.
   ========================================================================== */

.ats-reviews .rv-summary {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 70px;
  align-items: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 40px 0;
  margin-top: 48px;
}

.ats-reviews .rv-score {
  text-align: center;
  padding-right: 70px;
  border-right: 1px solid var(--line);
}

.ats-reviews .rv-score .num {
  font-size: 56px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -1px;
}

/* 13px, up from 12px on 23 August 2026, owner preference: the band read small
   beside the enlarged pills and sort. One step, matching the step the sort took,
   and both sides of the band moved together so the balance is unchanged. */
.ats-reviews .rv-score small {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
  letter-spacing: 0.3px;
}

/* The concept's shared star row. Not defined anywhere else in the theme, so it
   is introduced here rather than reused. */
.ats-reviews .hp-stars {
  display: flex;
  gap: 3px;
}

.ats-reviews .rv-score .hp-stars {
  justify-content: center;
  margin-top: 14px;
}

/* ⚠️ 16px, UP FROM 15px, AND THE FRACTIONAL FILL SURVIVES SCALING BY
   CONSTRUCTION. The clip rect is expressed in viewBox units (a width of 16.8 of
   24 for a 3.7 average), so it scales with the box rather than being pinned to
   pixels: changing width/height cannot change the FRACTION, only its size.

   That is the argument, not the evidence. ⚠️ getBoundingClientRect ON THE
   CLIPPED PATH IGNORES THE CLIP, which is recorded lore in this file, so it
   cannot verify this. It was verified by PIXEL SAMPLING a screenshot instead:
   the ink boundary of the fourth star sits at 0.700 of the star box before the
   change and 0.700 after, against a fully filled star's 0.867 (the star's own
   right tip). 16.8 / 24 = 0.700.

   Sized proportionately rather than by the same +1 the text took: at 12px text
   the star was 15px, a ratio of 1.25, and 13 x 1.25 = 16.25, so 16 keeps the
   star and its count line in the same relationship they had. */
.ats-reviews .hp-stars svg {
  width: 16px;
  height: 16px;
  fill: var(--ink);
  shape-rendering: geometricPrecision;
}

.ats-reviews .hp-stars svg.off {
  fill: var(--line);
}

/* The two layers of a fractional summary star (deviation 3, see the score
   block). Classes rather than fill= attributes: the svg's own fill would
   otherwise be inherited by both paths, and an inherited value loses to any
   rule that matches the path, where a presentation attribute would not. */
.ats-reviews .hp-stars svg .st-off {
  fill: var(--line);
}

.ats-reviews .hp-stars svg .st-on {
  fill: var(--ink);
}

.ats-reviews .rv-bars {
  display: flex;
  flex-direction: column;
  /* DELIBERATE DEVIATION (1), settled over two rounds on 12 Aug 2026:
       concept   9px
       round 1  11px  (owner asked for roughly 20% more air)
       round 2  17px  (owner asked to open it further, final)
     Do not "correct" this back to the concept's 9px in a fidelity pass. The
     history is kept because 17px is nearly double the concept and reads as
     drift without it. */
  gap: 17px;
  width: 400px;
}

.ats-reviews .rv-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  background: none;
  border: none;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  text-align: left;
}

/* ⚠️ 13px, AND THE 44px COLUMN WIDTH IS DELIBERATELY UNCHANGED. The track is
   `flex: 1` inside a 400px row, so its length is whatever is left after the two
   label columns and the gaps: widening either column would SHORTEN EVERY BAR.
   The bars are the comparison this histogram exists to make, so they stay put.
   Measured at 13px, "5 star" sets to about 41px inside the 44px column, so
   nothing needed widening anyway. */
.ats-reviews .rv-bar .lbl {
  font-size: 13px;
  color: var(--muted);
  width: 44px;
  flex-shrink: 0;
  letter-spacing: 0.4px;
}

.ats-reviews .rv-bar .track {
  flex: 1;
  height: 7px;
  background: var(--fill);
}

.ats-reviews .rv-bar .fill {
  display: block;
  height: 100%;
  background: var(--ink);
}

/* 13px, and the 40px column is unchanged for the same reason as .lbl: it feeds
   the track's remaining width. "40%" sets to about 26px at this size. */
.ats-reviews .rv-bar .pct {
  font-size: 13px;
  color: var(--muted);
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.ats-reviews .rv-bar:hover .lbl,
.ats-reviews .rv-bar:hover .pct {
  color: var(--ink);
}

.ats-reviews .rv-bar.on .lbl,
.ats-reviews .rv-bar.on .pct {
  color: var(--ink);
  font-weight: 500;
}

.ats-reviews .rv-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 34px 0 30px;
}

/* The right-hand pair: Write a review, then Sort. Grouped rather than left as
   two loose children of .rv-tools, because that row is space-between and three
   children would push the button into the middle instead of against the sort. */
.ats-reviews .rv-toolsright {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The UA rule for [hidden] loses to any author display rule, and .rv-tools
   sets one. Restated so the ship-hidden-then-reveal pattern actually holds. */
.ats-reviews [hidden] {
  display: none !important;
}

.ats-reviews .rv-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ⚠️ THE PILLS ARE MATCHED TO THE WRITE-A-REVIEW BUTTON, 23 August 2026, owner
   preference. They sat visibly smaller beside it once the button moved into
   this row, so the button is now the reference for every part of their
   register: 12px, 1.4px tracking, uppercase, weight 500, a 1px ink border, and
   a height matched exactly rather than approximately.

   HEIGHT IS EXACT, AND line-height: 1 IS WHAT MAKES IT SO. The button computes
   to 44px from 15 + 15 padding, a 12px line at line-height 1, and 2px of
   border. The pill previously left line-height at `normal`, which is about 14.4
   at this size, so matching the padding alone would have overshot by 2px. With
   line-height pinned the two arithmetics are identical and both land on 44.

   ⚠️ THE SIDE PADDING IS 22px, NOT THE BUTTON'S 44px, AND THAT IS A JUDGEMENT
   RATHER THAN AN OVERSIGHT. 44px suits one wide CTA carrying a 14-character
   label. On a repeated set of 4 to 6-character labels it is dead air: "5 STAR"
   is about 48px of text, so 44px a side would make a 136px pill and a row of
   six about 850px before gaps, which bloats the row at 1440 and is unusable at
   390. 22px is half the button's, keeps the same visual rhythm around a short
   label, and holds the row within its space at both widths. The HEIGHT is what
   carries the match; the horizontal air is scaled to the content.

   The border moves from --line to --ink, per the same "match the button"
   instruction. It reads heavier than before, which is the point. */
.ats-reviews .rv-pill {
  border: 1px solid var(--ink);
  background: none;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1;
  padding: 15px 22px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius);
}

.ats-reviews .rv-pill.on {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* ⚠️ HOVER IS GATED BEHIND @media (hover: hover), AND THIS IS THE FIRST SUCH
   GATE IN THE THEME. Nothing else here gates hover, including the Write a
   review button's own inversion a few hundred lines down, so there was no
   existing pattern to follow: the store's `data-ats-input` modality attribute
   exists but is used for FOCUS rings, which is a different question.

   The reason to gate it here specifically: a pill is a filter that is tapped,
   and on touch a :hover style latches after the tap and stays until something
   else is touched. An inverted pill that is not actually the active filter is
   worse than no hover at all, because inversion is exactly how this row signals
   which filter IS on. On the button that confusion cannot arise, which is
   presumably why it was never gated.

   ⚠️ `:not(.on)` RATHER THAN LETTING THE ACTIVE PILL RESTYLE ITSELF. The active
   pill is already inverted with identical values, so a plain `.rv-pill:hover`
   would compute the same and look like a no-op today. It would stop being one
   the moment `.on` gained anything the hover rule does not repeat, and the two
   selectors tie on specificity so source order would silently decide. Excluding
   the active pill means hovering it is structurally a no-op rather than an
   accidental one.

   No transition, matching the button, which inverts instantly. */
@media (hover: hover) {
  .ats-reviews .rv-pill:not(.on):hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
  }
}

.ats-reviews .rv-sort {
  position: relative;
}

/* ⚠️ 13px, UP FROM 12px, AND IT LANDS ON A NUMBER THAT WAS ALREADY IN THE FILE.
   The trigger read small beside a 44px button. The nudge was going to be 13
   then 14 if 13 still looked short, but 13 turned out to be the right answer
   for a reason worth recording: the sort MENU items were already 13px, so the
   trigger was the odd one out at 12. Raising it to 13 unifies the control with
   its own dropdown instead of introducing a second mismatch, which is why the
   menu items are deliberately NOT changed.

   The current-value span inherits this size, so both halves move together.
   Weight and casing are untouched, per the brief. Vertical centring needs no
   adjustment: the pair sits in a flex group with align-items: center, so a
   taller trigger re-centres itself. Verified after, not assumed. */
.ats-reviews .rv-sortbtn {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ats-reviews .rv-sortbtn span {
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.3px;
}

.ats-reviews .rv-sortmenu {
  position: absolute;
  top: 26px;
  right: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  min-width: 200px;
  z-index: 60;
  display: none;
}

.ats-reviews .rv-sortmenu.on {
  display: block;
}

.ats-reviews .rv-sortmenu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 12px 16px;
  cursor: pointer;
}

.ats-reviews .rv-sortmenu button:hover {
  background: var(--fill);
}

.ats-reviews .rv-sortmenu button.sel {
  font-weight: 500;
}

.ats-reviews .rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.ats-reviews .rv {
  border: 1px solid var(--line);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.ats-reviews .rv-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.ats-reviews .rv-date {
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ⚠️ THE TITLE NEEDS ITS OWN RULE OR IT RENDERS AT THE UA's h3 DEFAULT, which
   is 32px with 32px margins: a heading two and a half times the body size on a
   13.5px card. Caught by injecting one and reading the computed style, because
   no fixture carries a title so nothing renders it today.

   Register chosen against the card's own type rather than invented: the body is
   13.5px/1.8 in --ink and the date is 11.5px muted, so the title takes 14px at
   weight 600, a single step above the body and clearly its heading without
   competing with the summary band's 56px score. The bottom margin is 10px
   against the body's own 18px, so the title binds to the text it introduces
   rather than floating between the stars row and the body. */
.ats-reviews .rv-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 10px;
  /* A long single-word title cannot widen the grid track: the same min-content
     lesson the byline needed. */
  overflow-wrap: anywhere;
}

.ats-reviews .rv p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 18px;
}

/* ⚠️ THE -webkit-line-clamp TREATMENT IS GONE, REPLACED BY THE PDP
   DESCRIPTION'S TRIM, 23 August 2026, owner request. The card used to clamp in
   CSS and hang a block "Show more" underneath; it now cuts the text with a real
   ellipsis and puts an inline underlined toggle on the same line, exactly as
   sections/ats-main-product.liquid does for the product description.

   DELIBERATE DEVIATION (2) SURVIVES THE CHANGE. The reason the card is clamped
   at all is unchanged (a 243px row-to-row spread the owner found messy), and
   `clamp_lines` still controls the line count, still defaulting to 4. Only the
   mechanism moved.

   NO FADE, still. The recorded reason applies to both mechanisms: a gradient
   over cut text leaves half-visible letters behind the control and reads as a
   rendering fault. A trim cuts at a word boundary and nothing is covered.

   The body stays a BLOCK: assets/ats-reviews.js measures its scrollHeight, and
   that reads 0 on a non-replaced inline element, which is how the PDP's own
   first attempt silently disabled itself.

   ⚠️ AND IT CAME BACK, DELIBERATELY AND ONLY AS THE BORN STATE, 23 August
   2026. .rv-body--clamp ships in the markup so a card is never painted at full
   height on a cold load, and assets/ats-reviews.js removes it before taking
   its own measurement and substituting the trim above. The two are not in
   competition: the clamp owns the frames before the script runs, the trim owns
   every frame after. What was rejected was the clamp PLUS A FADE as the final
   treatment, not a clamp as a starting point, and there is no fade here.

   ⚠️ THE CLAMP GOES ON THE WRAPPER, NOT THE PARAGRAPHS. -webkit-line-clamp
   applies per element, so clamping each <p> would give every paragraph its own
   N lines and a three-paragraph review would show 3N. Same rule the home
   rail's .hp-rev-body follows.

   The line count is read from --rv-clamp, which .rv-grid carries from the
   section's clamp_lines setting, so this and the script cannot disagree. */
.ats-reviews .rv-body--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--rv-clamp, 4);
  overflow: hidden;
}

.ats-reviews .rv-body {
  margin-bottom: 18px;
}

/* Concept register for the trimmed run, matching the paragraphs it replaces so
   a clamped card and an expanded one read identically. */
.ats-reviews .rv-body__trim {
  margin: 0;
}

/* Ported from .ats-pdp__desc-toggle value for value, read from the product
   section rather than re-chosen. font-family and line-height are REQUIRED
   rather than decorative: a <button> inherits neither, so without them the
   control renders in the UA default face at `normal` leading beside the body
   text around it. */
.ats-reviews .rv-expand {
  margin: 0 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

.ats-reviews .rv-expand[hidden] {
  display: none;
}

html:not([data-ats-input='pointer']) .ats-reviews .rv-expand:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ⚠️ THE BYLINE WAS NEVER FAILING TO PIN. Measured before changing anything:
   margin-top:auto resolved correctly (43px / 24px / 0px across a row), the grid
   stretched all three cards to an equal 254px, and every byline shared the same
   BOTTOM edge and the same 29px gap to the card bottom.

   What differed was the byline's own HEIGHT: a product title that wraps to two
   lines makes a 82px byline where a one-line title makes 63px, so bottom-pinned
   blocks start at different tops and the author line looks misaligned. The fix
   is therefore to stop the title wrapping, not to touch the pinning. */
.ats-reviews .rv-by__line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ⚠️ `overflow: hidden` DOES NOT STOP nowrap TEXT WIDENING THE GRID. It clips
   what is PAINTED; it does not zero the block's min-content contribution. A
   `1fr` track is `minmax(auto, 1fr)`, so the track floor is the card's
   min-content width, which the un-wrappable byline had just made as wide as the
   longest product title. Measured at 390 before this line: cards 457px wide and
   a 476px document, so the whole page scrolled sideways, and no byline ever
   ellipsised because every column had grown to fit. min-width: 0 on the grid
   item replaces that automatic minimum, and the ellipsis then has something to
   bite on. Proven by control: with nowrap forced off the document was 390px. */
.ats-reviews .rv {
  min-width: 0;
}

.ats-reviews .rv-by {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.ats-reviews .rv-by b {
  color: var(--ink);
  font-weight: 500;
}

.ats-reviews .rv-verified {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--muted);
}

.ats-reviews .rv-verified svg {
  width: 12px;
  height: 12px;
}

/* The admin reply. No concept reference exists, so it borrows the store's
   inset-block treatment rather than inventing one. Unproven against real data;
   see the note in the markup. */
.ats-reviews .rv-reply {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--fill);
}

.ats-reviews .rv-reply__who {
  display: block;
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.ats-reviews .rv-reply p {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

.ats-reviews .rv-empty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.ats-reviews .rv-more {
  display: flex;
  justify-content: center;
  margin-top: 46px;
}

.ats-reviews .rv-more button,
.ats-reviews .rv-write__btn {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 15px 44px;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  border-radius: var(--radius);
}

.ats-reviews .rv-more button:hover,
.ats-reviews .rv-write__btn:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ⚠️ .rv-write (the old bottom-centred wrapper) IS GONE, 23 August 2026. The
   button moved into the tools row and its wrapper went with it; only the button
   itself survives. Do not reintroduce a centred wrapper: the block is shared,
   so a stray one would put a second button on both surfaces. */
.ats-reviews .rv-write__btn {
  display: inline-block;
  text-decoration: none;
  /* It sits next to a text-sized sort control now, so it must not stretch the
     row: the padding is the concept's, the line-height keeps the box tight. */
  white-space: nowrap;
  line-height: 1;
}

/* Keyboard focus through the store's modality gate, as everywhere else. */
html:not([data-ats-input='pointer']) .ats-reviews .rv-bar:focus-visible,
html:not([data-ats-input='pointer']) .ats-reviews .rv-pill:focus-visible,
html:not([data-ats-input='pointer']) .ats-reviews .rv-sortbtn:focus-visible,
html:not([data-ats-input='pointer']) .ats-reviews .rv-more button:focus-visible,
html:not([data-ats-input='pointer']) .ats-reviews .rv-write__btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* The concept's own breakpoints for the grid: 1100 to two up, 760 to one. The
   760 is the concept's; the store-wide rule is 750 and is used for the summary
   band below, which is ours rather than a ported value. */
@media (max-width: 1100px) {
  .ats-reviews .rv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .ats-reviews .rv-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 750px) {
  .ats-reviews .rv-summary {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ats-reviews .rv-score {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 28px;
  }

  .ats-reviews .rv-bars {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .ats-reviews .rv {
    padding: 20px 18px;
  }
}

/* ==========================================================================
   THE JUDGE.ME HAPPY CUSTOMERS WIDGET (all-reviews v2025)
   --------------------------------------------------------------------------
   ⚠️ THIS IS A DIFFERENT WIDGET FROM THE ONE assets/ats-judgeme.css THEMES.
   That file targets the v3 `jdgm-*` class set. This one is the 2025 rebuild:
   `all_reviews_widget_v2025_enabled` is now true, it mounts as a Shopify app
   block inside our .rv-slot, and it is a VUE APP whose internals carry a `jm-`
   prefix and per-component scoped-style attributes (data-v-*). None of the
   jdgm- selectors in ats-judgeme.css reach it. Written against the served DOM
   on 12 August 2026, not against documentation.

   ⚠️ IT IS THEMED THROUGH CSS CUSTOM PROPERTIES, NOT SELECTORS, and that is the
   whole reason this layer is short. Judge.me sets its palette as inline
   variables on the widget container AND re-declares them on every .jm-review-item.
   Fighting the Vue scoped styles selector by selector would be pointless and
   fragile; overriding the handful of variables they read is stable and small.

   ⚠️ WHAT IS DELIBERATELY NOT HERE: THE COLOURS. The teal is
   `widget_primary_color` and friends in the Judge.me admin, and every one of
   them has a real setting. Overriding a setting with an !important CSS variable
   is exactly the fight this build avoids: it would break silently the day
   Judge.me renames a token, and it would leave the app's own preview showing a
   colour the storefront does not use. Those are listed for the owner to set in
   Judge.me instead. The rules below are only the things the app has NO setting
   for.
   ========================================================================== */

/* SQUARE, THE ONE NON-NEGOTIABLE. The widget ships 8px buttons, 24px pagination
   pills and rounded cards off its own corner tokens, and the 2025 widget
   exposes no corner setting (review_form_corner_style covers the form only).
   --radius is 0 store-wide and this is the whole character of the store, so it
   is overridden here rather than left to a setting that does not exist. */
.ats-reviews .jm-review-widget,
.ats-reviews .jdgm-review-card {
  --jm-widget-border-radius: 0;
  --jm-widget-border-radius-simplified: 0;
  --jm-corner-soft: 0;
  --jm-corner-round: 0;
  --jm-corner-extra-round: 0;
  --jm-corner-square: 0;
}

/* The variables above are inherited, so the buttons pick them up. These two
   carry their radius as an inline `--jm-btn-border-radius` on the element
   itself, which inheritance cannot beat, so they are set directly. Not
   !important: a same-element rule with a class already outranks the inline
   custom property fallback chain. */
.ats-reviews .jm-button {
  --jm-btn-border-radius: 0;
  border-radius: 0;
}

/* THE HISTOGRAM TRACK. Judge.me derives the unfilled track from the star colour
   at 10% opacity, so it follows the palette and can never be the concept's flat
   --fill. The concept is explicit: track --fill, bar --ink, 7px tall. Height is
   a variable they read, so it is set rather than fought. */
/* ⚠️ !important on both: the height is inline on the widget container and the
   track colour is inline on every bar as a color-mix of the star colour. The
   FILL is left alone on purpose, because it reads the star colour, which is a
   Judge.me setting. Only the track, which has no setting, is taken to --fill. */
.ats-reviews .jm-review-widget {
  --jm-review-widget-bar-chart-height: 7px !important;
}

.ats-reviews .jm-progress-bar {
  --jm-progress-track: var(--fill) !important;
  border-radius: 0;
}

.ats-reviews .jm-progress-bar__fill {
  border-radius: 0;
}

/* Histogram labels: the concept sets both the rating number and the percentage
   at 12px muted, going ink on hover and on the active row. */
.ats-reviews .jm-histogram-row__rating,
.ats-reviews .jm-histogram-row__frequency {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--muted);
}

.ats-reviews .jm-histogram-row:hover .jm-histogram-row__rating,
.ats-reviews .jm-histogram-row:hover .jm-histogram-row__frequency {
  color: var(--ink);
}

/* TYPOGRAPHY. The widget's size settings are coarse enums (small / medium /
   large), so the concept's exact values cannot be reached from the admin and
   are set here. Font family is already inherited Inter and is left alone. */
/* THE WIDGET HEADING. The shell already prints "Customer Reviews" as the page
   h1, so the widget's own title is a second heading saying the same thing. It
   is kept (hiding it is a setting, widget_title_enabled) but taken down to the
   store's small-caps label treatment so it reads as a section marker rather
   than competing with the h1 above it. */
.ats-reviews .jm-review-widget-header__title {
  --text-size: 11px !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

/* BUTTONS. Colour is a setting and is left to it; shape and lettering are not
   settable and follow the store's button treatment. */
/* (0,3,0) rather than !important: the button's size comes from a scoped rule
   at (0,2,0) with no inline variable behind it, so one extra class is enough. */
.ats-reviews .jm-review-widget .jm-button {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

/* The sort control, to match the concept's .rv-sortbtn lettering. */
.ats-reviews .jm-sort-filter__select {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.3px;
  border-radius: 0;
}



/* ==========================================================================
   CARDS MODE. ⚠️ THIS LAYER IS SETTING-DEPENDENT.

   `all_reviews_widget_v2025_reviews_section_theme` is "cards". In that mode the
   widget renders a MASONRY GRID of `jdgm-*` cards; in the default mode it
   renders a single column of `jm-review-item` rows. THE TWO SHARE ALMOST NO
   CARD MARKUP. Everything above still applies (header, histogram, filters,
   sort, buttons are `jm-` in both modes), but the card rules from the first
   theming round were pruned when this was written, because their targets no
   longer exist:

     jm-review-item          jm-review-content__body    jm-shop-reply
     jm-review-content__title    jm-reviewer-info__name/__details
     jm-pagination-controls__button   (load_more replaces numbered paging)

   IF THE SECTION THEME IS EVER SWITCHED BACK, this block stops matching and
   those rules have to come back. Check `reviews_section_theme` before
   concluding the page has broken.

   Verified against the served DOM on 12 August 2026, cards mode, load_more.
   ========================================================================== */

/* THE CARD. Two boxes: the outer .jdgm-review-card carries the border, the
   inner __content carries the padding, and both are .jm-box so both read the
   inline --jm-box-* variables. Same !important justification as everywhere in
   this file: those variables are inline on the elements. The border COLOUR is
   not a variable (their shorthand is `border: var(--width) solid` with no
   colour, so it falls back to currentColor and draws black), so it is
   out-specified instead. */
.ats-reviews .jdgm-review-card {
  --jm-box-border-width: 1px !important;
}

/* The inner box holds the padding. Concept .rv is 28px; Judge.me ships
   var(--jm-space-600) = 24px, inline, so the variable is overridden in place. */
.ats-reviews .jdgm-review-card__content {
  --jm-box-padding: 28px !important;
}

.ats-reviews .jm-review-widget .jdgm-review-card {
  border-color: var(--line);
}

/* CARD TYPOGRAPHY, all through --text-size because Judge.me renders every string
   through .jm-text, whose scoped rule reads that variable and is appended later
   than ours. Declaring font-size is silently ignored. Concept: body 13.5/1.8,
   byline name 12 at 500, date 11.5 muted, and review titles taken down from
   Judge.me's bold 20px to the store's small label treatment. */
.ats-reviews .jdgm-review-card__body {
  --text-size: 13.5px !important;
  line-height: 1.8;
}

.ats-reviews .jdgm-review-card__title {
  --text-size: 14px !important;
  --text-weight: 500 !important;
  letter-spacing: 0.3px;
}

.ats-reviews .jdgm-review-card__name {
  --text-size: 12px !important;
  --text-weight: 500 !important;
  letter-spacing: 0.3px;
}

/* THE DATE has no class of its own: it is a bare .jm-text in a .jm-box beside
   the name. Reached by excluding every string in the card that DOES have one,
   which is stable because those four names are the widget's own API. */
.ats-reviews .jdgm-review-card .jm-text:not(.jdgm-review-card__name):not(.jdgm-review-card__title):not(.jdgm-review-card__body):not(.jdgm-review-card__reply-content) {
  --text-size: 11.5px !important;
  /* !important because the date carries `color: var(--jm-review-widget-text-color)`
     as an INLINE declaration, which no selector can outrank. */
  color: var(--muted) !important;
  letter-spacing: 0.3px;
}

/* THE ADMIN REPLY, verified against fixture #007.

   ⚠️ .jdgm-reply-item__content IS NOT THE REPLY. Despite the name it is the
   generic content box Judge.me wraps around EVERY card's text, the review body
   included. Putting the fill on it, which the first pass of this layer did, put
   a grey panel behind all ten review bodies. Caught on the 1440 screenshot.

   The fill goes on the reply paragraph itself, which is the only element that
   exists solely when there is a reply. */
.ats-reviews .jdgm-review-card__reply-content {
  --text-size: 13px !important;
  line-height: 1.7;
  display: block;
  background: var(--fill);
  padding: 16px 18px;
  margin-top: 4px;
}

/* The read-more control the clamp exposes. Concept register, not a link blue. */
.ats-reviews .jdgm-review-card__more-text {
  --text-size: 12px !important;
  letter-spacing: 0.3px;
  color: var(--muted);
}

/* ⚠️ THE "REVIEW ABOUT THE STORE" CHIP IS HIDDEN, AND THIS IS THE ONE PLACE IN
   THIS FILE THAT HIDES WIDGET CONTENT. The justification, because the rule
   elsewhere is never to hide what the app renders:

   Every review on this page is a store review. The page is the all-reviews
   page, there is no product-review stream beside it, and the tab above the grid
   already says "Store reviews (200)". So the chip is not attribution, it is the
   same fact repeated on all ten cards, and the concept has no equivalent.

   It is DUPLICATED CONTEXT, NOT PROVENANCE. The Powered by Judge.me attribution
   is untouched, here and everywhere, and must stay that way.

   ⚠️ THERE IS A SETTING THAT MAY DO THIS PROPERLY: `widget_store_review_label_text`
   holds the string. If blanking it in the Judge.me admin removes the chip, that
   is the better route and this rule should be deleted. Reported to the owner;
   not tested from here because it is their field to change. */
.ats-reviews .jm-store-review-banner {
  display: none;
}

/* THE TAB STRIP. One tab reading "Store reviews (200)" duplicates the page h1
   and the summary count, and no setting removes it (only the label text is
   settable). Rather than hide content, it drops into the concept's quiet
   tools-row register: small caps, muted, and no heavy active underline. */
.ats-reviews .jdgm-tablist {
  border-bottom: 1px solid var(--line);
}

.ats-reviews .jdgm-tab.jdgm-tab {
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--muted);
}

.ats-reviews .jdgm-tab--active.jdgm-tab--active {
  color: var(--ink);
}

.ats-reviews .jdgm-tablist__activeBar {
  background: var(--ink);
  height: 1px;
}

/* ⚠️ CLASS DOUBLED ON THE TAB AND THIS BUTTON. Judge.me styles both through
   `[data-v-*]` attribute selectors at (0,2,0), the same weight as ours, and
   their stylesheet is appended to <body> at runtime so it always wins the tie.
   Doubling the class is (0,3,0) and needs no !important, which is why it is
   used here rather than the flag.

   THE SHOW MORE CONTROL, which is what load_more mode renders in cards mode
   (a .jdgm-masonry-grid__btn, not the jm-button the default mode uses). Concept
   button register: square, small caps, letterspaced. */
.ats-reviews .jdgm-masonry-grid__btn.jdgm-masonry-grid__btn {
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  padding: 14px 28px;
  cursor: pointer;
}

.ats-reviews .jdgm-masonry-grid__btn.jdgm-masonry-grid__btn:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

/* THE SUMMARY SCORE. The concept's .rv-score sets the figure at 56px beside a
   bordered divider; this header is a centred compact cluster with the count
   inline, so the layout cannot be reached (reported as structural residue) but
   the figure itself can carry the concept's weight. 44px rather than 56 because
   the count sits BESIDE it here rather than beneath, and 56 towered over it. */
.ats-reviews .jm-average-rating-display .jm-text:first-of-type {
  --text-size: 44px !important;
  --text-weight: 600 !important;
  letter-spacing: -1px;
  line-height: 1;
}

/* FILTER PILLS, to the concept's .rv-pill: square, hairline, letterspaced. */
.ats-reviews .jm-review-widget .jm-custom-answer-filter {
  border: 1px solid var(--line);
  border-radius: 0;
  letter-spacing: 0.6px;
}

@media (max-width: 750px) {
  .ats-reviews .rv-wrap {
    padding: 44px 18px 60px;
  }

  .ats-reviews .rv-slot--empty {
    padding: 28px 18px;
    min-height: 320px;
  }
}
{% endstylesheet %}

/* ⚠️ 390 IS DECIDED, NOT LEFT TO THE WRAP. .rv-tools already wraps, so without
   a rule the pills take the top line and the button/sort pair lands wherever it
   fits, which at this width is a coin toss between one cramped line and the
   button orphaned on its own.

   The decision: below 750 the pair takes a FULL WIDTH line of its own under the
   pills, with Write a review pushed left and Sort pushed right. That keeps the
   two controls on one line, keeps their left-to-right order identical to
   desktop, and puts the button's tap target hard against the screen edge where
   a thumb reaches it. Measured at 390: the button is 209px and the sort control
   about 120px inside a 354px row, so the pair fits on one line with room to
   spare; space-between spends that room between them rather than letting the
   sort drift into the middle. */
@media (max-width: 750px) {
  .ats-reviews .rv-toolsright {
    width: 100%;
    justify-content: space-between;
  }
}