/**
 * REVIEWS
 *
 * Styles for the [tonic_reviews] shortcode. Ported from the inline <style>
 * that used to live in the Showit "reviews" embed on the shop page.
 *
 * Everything is scoped under #tonic-reviews on purpose. The shortcode renders
 * inside a Showit text element, which carries the `se-wpt` class, and Showit
 * styles those aggressively:
 *
 *   .d .se-wpt h3  { text-transform:uppercase; text-align:center;
 *                    letter-spacing:.1em; font-family:'Knockout Junior Welter';
 *                    font-size:14px; line-height:1.8; margin-bottom:18px; }
 *   .d .se-wpt p   { margin-bottom:16px; }
 *   .se-wpt img    { height:auto; max-width:100%; }
 *
 * Those are (0,2,1) and (0,1,1). Class-only selectors lose to them, so the id
 * prefix is what keeps the review design intact. Any property Showit sets that
 * we care about has to be declared here explicitly, not just left to inherit.
 *
 * `.d` / `.m` are Showit's desktop / mobile classes on <html>.
 */

/* Neutralize the text-element context so the ported rules below behave the
   same way they did inside the old embed, where Showit's reset left
   line-height at 1 and letter-spacing unset. */
#tonic-reviews {
  line-height: 1;
  letter-spacing: normal;
  text-align: left;
}

#tonic-reviews .review-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-gap: 0px;
  align-items: center;
  border-bottom: 1px solid rgb(119 117 117 / 25%);
  margin-bottom: 50px;
  padding-bottom: 50px;
}

#tonic-reviews .review-container:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.m #tonic-reviews .review-container {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
}

.m #tonic-reviews .review-container:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}

#tonic-reviews .review-image {
  width: 100%;
  height: 235px;
  max-height: 325px;
  object-fit: cover;
}

.m #tonic-reviews .review-image {
  height: 270px;
  max-height: 270px;
  display: block;
  margin: 0 auto;
}

#tonic-reviews .review-content {
  display: flex;
  flex-direction: column;
}

.d #tonic-reviews .review-content {
  margin-left: 50px;
  max-width: 675px;
}

.m #tonic-reviews .review-content {
  margin-top: 25px;
}

#tonic-reviews .review-stars {
  width: 100%;
  max-width: 130px;
  margin-bottom: 15px;
}

.m #tonic-reviews .review-stars {
  margin-top: 30px;
  max-width: 130px;
}

/* text-transform / letter-spacing / text-align are declared to beat
   `.d .se-wpt h3`, which would otherwise uppercase and center the pull quote. */
#tonic-reviews .review-highlight {
  font-size: 28px;
  font-family: 'IvyOra Text Regular';
  margin: 24px 0 24px;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
}

.m #tonic-reviews .review-highlight {
  font-size: 25px;
  line-height: 1.25;
  margin-bottom: 15px;
}

#tonic-reviews .review-body {
  margin-bottom: 20px;
  margin-top: 10px;
  font-family: 'HK Grotesk Regular Legacy';
  font-size: 15px;
  line-height: 1.7;
}

.m #tonic-reviews .review-body {
  font-size: 15px;
  margin-bottom: 20px;
}

/* margin is declared to beat `.se-wpt p { margin-bottom:16px }`. */
#tonic-reviews .review-cite {
  font-family: 'HK Grotesk Regular Legacy';
  color: #878787;
  margin: 0;
}

.m #tonic-reviews .review-cite {
  font-size: 13px;
}

/* REVIEW STYLE 2 */
#tonic-reviews .style-2-left .review-stars {
  margin-bottom: 20px;
}

.m #tonic-reviews .style-2-left .review-cite,
.d #tonic-reviews .review-cite-mobile {
  display: none;
}

#tonic-reviews img.review-stars {
  display: none;
}
