/** Shopify CDN: Minification failed

Line 114:63 Unexpected "/"
Line 122:79 Unterminated string token
Line 124:81 Unterminated string token

**/
/* app-blocks.css
   ============================================================================
   Chrome for third-party app blocks, so an app widget sits inside this design
   rather than on top of it.

   WHY THIS FILE EXISTS AND NOT theme-additions.css. That file is 70KB, and
   `themeFilesUpsert` replaces whole files rather than patching them — every edit
   there means retransmitting all of it. App-block chrome is also a different
   concern: it styles markup this theme does not own and cannot rely on.

   ---- Google Reviews Rocket -------------------------------------------------

   PLACEMENT. Moved 2026-09-04 from the bottom of the homepage to position four,
   directly under `new_releases`:

     · 93% of all sessions land on the homepage, so brand trust has to be
       established there or not at all.
     · At the bottom it sat on screen 11 of 12. The 96.8% of sessions that never
       add anything to a bag never reached it.
     · It is NOT above `new_releases`, deliberately. It is a tall block; putting it
       higher pushed the first Add button from 1.5 screens back to roughly 3,
       undoing the largest measured fix on this store.

   Matched on `:has()` rather than the section id, because the id is generated by
   the theme editor and changes if the block is removed and re-added.
   ============================================================================ */

.shopify-section:has(.grp-entangle--root) {
  background: var(--void, #0E0B0A);
  padding: clamp(2rem, 4vw, 3.25rem) var(--page, 1.25rem);
  border-top: 1px solid var(--hair, rgba(232, 224, 212, .28));
  border-bottom: 1px solid var(--hair, rgba(232, 224, 212, .28));
}

.grp-entangle--root {
  max-width: 72rem;
  margin-inline: auto;
}

/* ============================================================================
   HOW THE REVIEW TEXT IS RENDERED, AND WHY THAT DECIDES EVERYTHING HERE.
   A post-mortem, kept because it cost two wrong attempts.

   `google-review.min.js` has THREE rendering modes, chosen by the widget's
   `review_text_display_format` setting in the app admin:

     case "more":    t.slice(0, review_truncate_max_len) + a read-more <span>
                     — the text is CUT IN JAVASCRIPT. The rest is not hidden, it
                       is absent. CSS cannot recover it.
     case "scroll":  full text inside a 70px scrolling box.
     default:        full text, plus a `.truncated` class that the app's own CSS
                     clamps to 3 lines with -webkit-line-clamp.

   ATTEMPT ONE assumed `default` because the app's stylesheet contains a
   `.truncated` clamp rule. The store was on "more". So the clamp override did
   nothing, and hiding the read-more button removed the only route to the rest of
   a long review. That shipped, and it broke reviews on the live store.

   ATTEMPT TWO restored the button. It then emerged that in "more" mode the button
   works on mobile but not on desktop — the centre-focus slider positions its cards
   absolutely with `pointer-events:none` on `.grp-cfs-card`, re-enabled only for
   the centre and its two neighbours, so the far cards' buttons are unclickable.
   That is the app's layout code, not this file.

   THE RESOLUTION was to change the mode in the app admin to the `default`
   branch. Full text now reaches the DOM on every card, and the only thing
   standing between the customer and the whole review is a CSS clamp — which this
   file can legitimately remove. No button, so nothing to be unclickable.

   THE LESSON: a class name in a stylesheet is evidence of intent, not proof of
   behaviour. When the markup is built by someone else's JavaScript, read the
   JavaScript, and find out which branch the store is actually on.

   IF THE READ-MORE BUTTON EVER REAPPEARS, someone has switched
   `review_text_display_format` back to "more" — and the desktop click bug will
   come back with it. Change the setting rather than patching around it.
   ============================================================================ */

/* FULL REVIEWS. Valid only while the widget is in `default` mode, per above.
   `-webkit-line-clamp` only takes effect alongside `display:-webkit-box`, so the
   display is reset too — clearing the clamp alone leaves the element a webkit box
   and mangles the paragraph's line spacing. */
.shopify-section:has(.grp-entangle--root) .grp-entangle-item-body-review.truncated,
.shopify-section:has(.grp-entangle--root) .grp-entangle-item-body-review.truncatedTop {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* The scroll variant caps at 70px. A scrollbar inside a review card on a homepage
   band is worse than either alternative, so it is lifted too — harmless if the
   mode is never selected. */
.shopify-section:has(.grp-entangle--root) .grp-entangle-item-body-review.scroll {
  max-height: none !important;
  overflow-y: visible !important;
}

/* ============================================================================
   THE DARK PALETTE — BORROWED SELECTORS, NOT OWNED

   Every selector below belongs to Google Reviews Rocket. If the app renames a
   class these rules stop matching and the widget returns to white on a dark page
   — no error, it will just look wrong. IF THE REVIEWS GO WHITE AGAIN, THIS IS
   WHY. Re-read the app's stylesheet and update the selectors:
   /extensions/<uuid>/google-review-plus-by-entangle-1-*/assets/google-review.min.css

   The app exposes real CSS custom properties for exactly two layouts —
   `--grp-gallery-*` and `--grp-st-*` — both behind its PAID plan, so the free
   Default layout is styled by hand.

   THE THREE SURFACES:
     1. `.grp-en-custom-inner-card` is the big panel, a plain `background:#fff` in
        the app's stylesheet. Found by grepping that stylesheet for every white
        background rather than by guessing at DOM depth.
     2. `.grp-entangle-item` is each review card, coloured INLINE by the widget's
        JavaScript — which is why !important is load-bearing rather than lazy.
     3. The type colours are ordinary rules, forced for consistency.

   THE BLEND. Three tones: band at --void, panel one step up at #120D0B, cards one
   above at #17110F. About four points of lightness per step, so it reads as depth
   rather than stripes.

   LEFT ALONE: the gold stars (#f7bb04), and the Google "G" marks and reviewer
   avatars — the credibility signal, and recolouring a third-party mark would
   misrepresent it.
   ============================================================================ */

.shopify-section:has(.grp-entangle--root) .grp-en-custom-inner-card {
  background: #120D0B !important;
  border: 1px solid rgba(232, 224, 212, .1) !important;
  box-shadow: none !important;
}

.shopify-section:has(.grp-entangle--root) .grp-entangle--root,
.shopify-section:has(.grp-entangle--root) .grp-cfs,
.shopify-section:has(.grp-entangle--root) .grp-cfs-view {
  background-color: transparent !important;
}

.shopify-section:has(.grp-entangle--root) .grp-entangle-item {
  background-color: #17110F !important;
  border: 1px solid rgba(232, 224, 212, .14) !important;
  box-shadow: none !important;
}

.shopify-section:has(.grp-entangle--root) .grp-cfs-card,
.shopify-section:has(.grp-entangle--root) .grp-cfs-card.grp-cfs-pos-c {
  box-shadow: none !important;
}

/* ---- type ---------------------------------------------------------------- */

.shopify-section:has(.grp-entangle--root) .grp-en-profile-info .name,
.shopify-section:has(.grp-entangle--root) .grp-entangle-item-head-name,
.shopify-section:has(.grp-entangle--root) a.grp-entangle-all-review {
  color: var(--sand, #E8E0D4) !important;
}

.shopify-section:has(.grp-entangle--root) .grp-entangle-item-body-review,
.shopify-section:has(.grp-entangle--root) .grp-en-custom-text,
.shopify-section:has(.grp-entangle--root) .grp-en-profile-info {
  color: rgba(232, 224, 212, .82) !important;
}

/* THE DATES needed two fixes. The app sets `.grp-en-profile-info .time` to
   #6b7280 — legible on the white card it was designed for, close to invisible on
   #17110F. Separately `.grp-entangle-item-date` carries `opacity:.7`, which
   multiplies on top of whatever colour it inherits, so recolouring alone still
   left it dimmed. Sand at 66% over #17110F measures about 7:1, past WCAG AA for
   small text, while staying quieter than the body at 82%. */
.shopify-section:has(.grp-entangle--root) .grp-en-profile-info .time,
.shopify-section:has(.grp-entangle--root) .grp-entangle-item-date,
.shopify-section:has(.grp-entangle--root) .grp-entangle-sub-infomation {
  color: rgba(232, 224, 212, .66) !important;
  opacity: 1 !important;
}

/* The read-more control should not appear in `default` mode. Styled anyway, so
   that if the setting is ever switched back it is legible rather than browser
   blue (#00f) on near-black. NEVER hidden — see the post-mortem. */
.shopify-section:has(.grp-entangle--root) .grp-entangle-item-body-review button,
.shopify-section:has(.grp-entangle--root) button.grp-read-more,
.shopify-section:has(.grp-entangle--root) span.grp-read-more {
  color: var(--sand, #E8E0D4) !important;
  opacity: .9 !important;
  text-decoration: underline !important;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* The slider arrows are white circles with #3c4043 chevrons. */
.shopify-section:has(.grp-entangle--root) .grp-cfs-nav button {
  background-color: #17110F !important;
  color: var(--sand, #E8E0D4) !important;
  border: 1px solid rgba(232, 224, 212, .22) !important;
}

.shopify-section:has(.grp-entangle--root) .grp-cfs-nav button:hover {
  background-color: #1F1714 !important;
}

/* The carousel dots default to a dark grey that vanishes on this ground. */
.shopify-section:has(.grp-entangle--root) .grp-cfs-nav .swiper-pagination-bullet,
.shopify-section:has(.grp-entangle--root) .grp-entangle--root [class*="bullet"] {
  background-color: rgba(232, 224, 212, .32) !important;
}

.shopify-section:has(.grp-entangle--root) .grp-entangle--root [class*="bullet-active"] {
  background-color: var(--sand, #E8E0D4) !important;
}

/* ============================================================================
   JUDGE.ME — the same problem as above, a different app

   THE BUG, found in the live DOM on 2026-09-09. `.jdgm-popup-card` sets
   `background:#fff` and never sets a `color`, so it inherits the theme's body
   colour — rgba(232,224,212,.98) sand. Sand on white measures about 1.3:1. The
   card rendered, the stars rendered, and the review text was invisible. It is an
   app EMBED, declared in settings_data.json rather than a template, so it was
   broken on every page it appeared on and on both themes at once.

   WHY DARK, RATHER THAN DARK TEXT ON THE WHITE CARD. A white panel floating over
   a #0E0B0A page reads as someone else's furniture. The card goes to #1A1412 —
   one step off the band, the same three-tone blend as the Google block above.

   `!important` THROUGHOUT, AND LOAD ORDER IS WHY. Judge.me's stylesheet arrives
   from its own CDN via `loader.js` AFTER this file, so an ordinary rule of equal
   specificity loses. Custom properties accept `!important` too, which is the only
   reason the --jdgm-* overrides below survive.

   THE VARIABLES ARE JUDGE.ME'S OWN, read from :root in the live DOM rather than
   guessed. Overriding them recolours EVERY Judge.me surface — review widget,
   histogram, write-review button — so the teal (#108474) is dealt with once here
   instead of per widget.

   LEFT ALONE: reviewer avatars and the product thumbnail. Same reasoning as the
   Google marks above — recolouring a third-party mark misrepresents it.
   ============================================================================ */

:root {
  --jdgm-star-color: var(--warn, #E8C87A) !important;
  --jdgm-primary-color: var(--sand, #E8E0D4) !important;
  --jdgm-secondary-color: rgba(232, 224, 212, .14) !important;
  --jdgm-write-review-bg-color: var(--sand, #E8E0D4) !important;
  --jdgm-write-review-text-color: var(--void, #0E0B0A) !important;
}

.jdgm-popup-card {
  background: #1A1412 !important;
  color: rgba(232, 224, 212, .98) !important;
  border: 1px solid rgba(232, 224, 212, .28) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
}

/* The universal selector is deliberate. The card's children are coloured by
   Judge.me's own rules at several depths, and enumerating them would mean
   tracking someone else's DOM across releases. The three rules after it
   re-establish hierarchy; the star rule wins on specificity, 0-2-0 over 0-1-0. */
.jdgm-popup-card * { color: rgba(232, 224, 212, .98) !important; }
.jdgm-popup-card__rev-content { color: rgba(232, 224, 212, .90) !important; }
.jdgm-popup-card__reviewer { color: rgba(232, 224, 212, .72) !important; letter-spacing: .04em; }
.jdgm-popup-card .jdgm-star { color: var(--warn, #E8C87A) !important; }

.jdgm-popup-card a {
  color: var(--warn, #E8C87A) !important;
  text-decoration: underline !important;
  text-underline-offset: .2em;
}

/* The close button carries its own white background, set independently of the
   card's — so fixing the card alone left a white chip at its top corner. */
.jdgm-popup-card__close-btn {
  background: #1A1412 !important;
  border: 1px solid rgba(232, 224, 212, .28) !important;
  color: rgba(232, 224, 212, .72) !important;
}

.jdgm-popup-card__close-btn:hover {
  background: #241C18 !important;
  color: var(--sand, #E8E0D4) !important;
}