/* ============================================================================
   Gelagen VSL — pitch 2847
   Rewritten from the Elementor export. BEM naming, one stylesheet, no !important.
   Breakpoints follow the original: 1024px (tablet) and 767px (mobile).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* brand */
  --c-brown:        #b38448;
  --c-brown-alt:    #b38b45;
  --c-brown-dark:   #996f26;
  --c-brown-deep:   #613c14;
  --c-brown-soft:   #7a462c;
  --c-gold-line:    #d88b37;
  --c-gold-icon:    #c0811d;
  --c-gold-ink:     #4d330a;

  /* buttons */
  --c-silver:       #d1d1d1;
  --c-silver-dark:  #bdbdbd;
  --c-silver-hover: #b6b6b6;
  --c-gold:         #ffcc00;
  --c-gold-dark:    #e7b900;
  --c-gold-soft:    #ffeb9a;
  --c-green:        #5cc74c;
  --c-green-dark:   #4cbe48;
  --c-green-hi-a:   #5cda3f;
  --c-green-hi-b:   #62e25e;

  /* neutrals */
  --c-ink:          #000;
  --c-white:        #fff;
  --c-body:         #333;
  --c-footer:       #121212;
  --c-hairline:     #c0c0c0;
  --c-fb-name:      #365899;
  --c-fb-bubble:    #f0f2f5;
  --c-fb-muted:     #949494;
  --c-review-ink:   #a55a43;
  --c-review-text:  #7a7a7a;
  --c-star:         #f6c026;
  --c-page-soft:    #fdfdfd;

  /* type */
  --ff-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ff-poppins: "Poppins", var(--ff-system);
  --ff-sora: "Sora", var(--ff-system);
  --ff-roboto: "Roboto", var(--ff-system);
  --ff-nunito: "Nunito", var(--ff-system);
  --ff-nunito-sans: "Nunito Sans", var(--ff-system);
}

/* ------------------------------------------------------------------ base */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--c-white);
  color: var(--c-body);
  font: 400 1rem/1.5 var(--ff-system);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p { margin: 0; font-weight: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; border: 0; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: bolder; }

/* Icon sprite holder — never painted. */
.sprite { display: none; }

/* Sections revealed by js/main.js once the VSL passes REVEAL_AT_SECONDS.

   NOTE: in the Elementor original this rule was commented out too, so every
   section is visible from page load and the timed reveal is effectively off.
   Uncomment the line below to switch the delayed reveal back on. */



/* =========================================================== topbar */
.topbar {
  font-family: Arial, sans-serif;
  background: var(--c-white);
  border-bottom: 1px solid #eee;
  padding: 10px;
}

.topbar__inner {
  max-width: 1140px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 25px;
}

.topbar__brand { display: flex; align-items: center; gap: 30px; }

.topbar__logo { display: block; height: 32px; width: auto; }

.topbar__actions { display: flex; align-items: center; gap: 20px; }

.topbar__icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
  color: var(--c-ink);
}

.topbar__signin {
  border: 1px solid var(--c-silver);
  border-radius: 50px;
  padding: 8px 24px;
  color: var(--c-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 1024px) {
  .topbar__inner { padding: 10px 20px; }
  .topbar__signin { display: none; }
}

@media (max-width: 767px) {
  .topbar { padding: 0; }
}


/* =========================================================== hero */
.hero__inner {
  max-width: 1004px;
  margin-inline: auto;
}

.hero__title {
  padding: 11px 0 10px;
  font: 600 32px/34px var(--ff-poppins);
  color: var(--c-ink);
}

.hero__subtitle {
  margin-top: 20px;
  font: 400 19px/1.5 var(--ff-sora);
  color: var(--c-ink);
  text-align: center;
}

.hero__kicker { display: block; margin-top: 20px; }

.hero__player {
  /* 10/11px reproduce the original container padding; the remaining 40px stand
     in for the empty script-holder container that used to follow the player */
  margin-top: 20px;
  padding: 10px 0 51px;
}

.hero__vturb {
  display: block;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
}

.hero__vturb-placeholder {
  position: relative;
  width: 100%;
  padding-top: 123.076923%;
  background: #000;
}

@media (max-width: 1024px) {
  .hero__player { padding: 20px 20px 40px; }
}

@media (max-width: 767px) {
  .hero { padding: 0 10px; }
  .hero__title { padding: 15px 0 0; font-size: 20px; line-height: 1.4em; }
  .hero__player { padding: 0 0 40px; }
}


/* =========================================================== offer intro */
.offer-intro {
  background: var(--c-brown);
  padding: 44px 10px 27px;
}

.offer-intro__inner {
  max-width: 1050px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.offer-intro__title {
  font: 900 46px/1 var(--ff-nunito-sans);
  color: var(--c-white);
  text-align: center;
}

.offer-intro__note {
  margin-top: 20px;
  margin-bottom: .9rem;
  font: 400 19px/1.5 var(--ff-sora);
  color: var(--c-white);
  text-align: center;
}

@media (max-width: 1024px) {
  .offer-intro__inner { max-width: 650px; }
}

@media (max-width: 767px) {
  .offer-intro { padding: 33px 20px 22px; }
  .offer-intro__inner { max-width: 360px; }
  .offer-intro__title { font-size: 26px; }
}


/* =========================================================== pricing grid */
.pricing {
  position: relative;
  z-index: 2;
  background: var(--c-white);
  padding: 20px 10px;
}

.pricing__inner { max-width: 1100px; margin-inline: auto; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 25px;
}

/* White band between the second pricing block and the promise band. */
.pricing-gap { background: var(--c-white); height: 97px; }

@media (max-width: 1024px) {
  .pricing { padding: 90px 10px 60px 19px; }
  .pricing__grid { grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 767px) {
  .pricing { padding: 20px 5px; }
  .pricing__grid { gap: 30px; }
}


/* =========================================================== offer card */
.offer {
  display: flex;
  flex-direction: column;
  border: 3px solid var(--c-gold-line);
  border-radius: 25px;
  box-shadow: 0 5px 20px 1px rgba(0, 0, 0, .5);
  padding: 3px;
  transition: transform .3s;
}

.offer:hover { transform: scale(1.05); }

.offer__head {
  border-radius: 20px 20px 0 0;
  padding: 10px 30px;
  background: var(--c-brown-dark);
}

.offer__badge {
  font: 800 20px/1 var(--ff-nunito);
  color: var(--c-white);
  text-align: center;
}

.offer__body {
  display: flex;
  flex-direction: column;
  padding: 10px;
  background: var(--c-white);
}

.offer__product,
.offer__figures {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offer__qty {
  margin: 5px 0 -9px;
  font: 900 35px/1 var(--ff-nunito);
  color: var(--c-ink);
  text-align: center;
}

.offer__supply {
  font: 400 20px/1 var(--ff-nunito);
  color: var(--c-ink);
  text-align: center;
}

.offer__shot {
  width: 84%;
  margin: -17px auto;
}

.offer__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 0 0 20px 20px;
  padding: 10px 10px 25px;
  background: var(--c-white);
}

.offer .btn { margin-bottom: 5px; }

.offer__cards {
  max-width: 75%;
  margin: 5px auto;
}

.offer__total,
.offer__ship {
  font: 500 1em/1.2em var(--ff-nunito);
  color: var(--c-ink);
  text-align: center;
}

.offer__ship { font-weight: 800; }
.offer--best .offer__ship,
.offer--popular .offer__ship { font-weight: 500; }

/* --- best offer (6 bottles): dark gradient body, gold button, no white foot */
.offer--best .offer__head { background: var(--c-white); }
.offer--best .offer__badge { color: var(--c-brown-dark); }

.offer--best .offer__body {
  border-radius: 0 0 22px 22px;
  padding: 10px 10px 25px;
  background: radial-gradient(at center center, var(--c-brown-dark) 50%, var(--c-brown-deep) 100%);
}

.offer--best .offer__qty,
.offer--best .offer__supply,
.offer--best .offer__total,
.offer--best .offer__ship { color: var(--c-white); }

.offer--best .offer__ship-free { color: var(--c-gold); }

@media (max-width: 1024px) {
  .offer { order: 0; }
  .offer--best,
  .offer--popular { order: -1; }

  .offer__head { padding: 10px; }
  .offer__badge { font-size: 35px; }

  .offer__body { flex-direction: row; padding: 10px 20px; }
  /* both columns ask for the full width and shrink equally, so they split 50/50 */
  .offer__product,
  .offer__figures { width: 100%; min-width: 0; justify-content: center; align-items: center; }

  .offer__foot { padding: 10px 20px; }
}

@media (max-width: 767px) {
  .offer:hover { transform: scale(1.03); }
  .offer--best { order: 1; }
  .offer--popular { order: 2; }
  .offer--basic { order: 3; }

  .offer__head { padding: 10px 0; }
  .offer__badge { font-size: 22px; }

  /* narrow phones: the rows wrap the way the Elementor containers did */
  .offer__body { flex-wrap: wrap; justify-content: center; padding: 10px 5px 0; }
  .price { flex-wrap: wrap; }
  .offer--best .offer__body { padding: 10px 5px 0; }

  .offer__product,
  .offer__figures { width: 50%; }
  .offer__figures { gap: 5px; }

  .offer__qty { margin: 0; font-size: 18px; }
  .offer__supply { font-size: 18px; }

  .offer__foot { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 10px 5px 5px; gap: 5px; }
  .offer__foot > * { width: 100%; }

  .offer .btn { margin-bottom: 10px; }
  .offer__cards { display: none; }
}


/* =========================================================== price */
.price {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  color: var(--c-ink);
}

.price__currency {
  font: 600 1.6em/1 var(--ff-roboto);
}

.price__amount {
  margin-bottom: -10px;
  font: 900 90px/1 var(--ff-nunito);
}

.price__unit {
  font: 700 20px/1 var(--ff-nunito);
  text-align: start;
}

.offer--best .price { color: var(--c-white); }

@media (max-width: 1024px) {
  .price { width: 100%; }
  .price__amount { font-size: 7em; }
}

@media (max-width: 767px) {
  .price__amount { margin-bottom: -5px; font-size: 75px; }
  .price__unit { margin-bottom: 5px; font-size: 18px; }
}


/* =========================================================== perks list */
.perks {
  --perk-icon: 20px;
  --perk-rule: var(--c-ink);
  display: flex;
  flex-direction: column;
  color: var(--c-ink);
}

.perks__item {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 14px/30px var(--ff-nunito);
}

.perks__item:not(:last-child) {
  padding-bottom: 5px;
  border-bottom: 2px dotted var(--perk-rule);
}

.perks__item + .perks__item { margin-top: 5px; }

.perks__icon {
  flex: none;
  width: var(--perk-icon);
  height: var(--perk-icon);
  margin-right: calc(var(--perk-icon) * .25);
  fill: currentColor;
}

.perks__label { padding-left: 5px; }

/* the "you save" line: gold icon, brown label */
.perks--accent { color: var(--c-gold-ink); }
.perks--accent .perks__icon { fill: var(--c-gold-icon); }

/* the list below it opens with the dotted rule the empty <li> used to draw */
.perks--ruled {
  margin-top: -13px;
  padding-top: 6px;
  border-top: 2px dotted var(--perk-rule);
}

.offer--best .perks { --perk-rule: var(--c-white); color: var(--c-white); }
.offer--best .perks--accent { color: var(--c-gold-soft); }
.offer--best .perks--accent .perks__icon { fill: var(--c-gold); }
.offer--best .perks--ruled .perks__icon { fill: var(--c-white); }

@media (max-width: 767px) {
  .perks { --perk-icon: 15px; align-self: center; }
  .perks__item { font-size: 12px; line-height: 23px; }
}


/* =========================================================== buttons */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 15px 20px;
  border-radius: 5px;
  font: 800 22px/39px var(--ff-nunito);
  text-align: center;
  transition: background-image .3s, transform .3s;
}

.btn__icon {
  flex: none;
  width: 1em;
  height: auto;
  aspect-ratio: 576 / 512;
  fill: currentColor;
}

.btn--silver {
  color: var(--c-ink);
  background-image: linear-gradient(180deg, var(--c-silver) 49%, var(--c-silver-dark) 50%);
}
.btn--silver:hover,
.btn--silver:focus-visible {
  background-image: linear-gradient(180deg, var(--c-silver-hover) 50%, var(--c-silver) 50%);
}

.btn--gold {
  color: var(--c-ink);
  background-image: linear-gradient(180deg, var(--c-gold) 49%, var(--c-gold-dark) 50%);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background-image: linear-gradient(180deg, var(--c-gold-dark) 50%, var(--c-gold) 50%);
}

.btn--green {
  color: var(--c-white);
  border-radius: 33px;
  background-image: linear-gradient(180deg, var(--c-green) 49%, var(--c-green-dark) 50%);
}
.btn--green:hover,
.btn--green:focus-visible {
  background-image: linear-gradient(180deg, var(--c-green-hi-a) 50%, var(--c-green-hi-b) 50%);
}

@media (max-width: 767px) {
  .btn { width: 95%; margin-inline: auto; padding: 0; font-size: 20px; line-height: 50px; }
}


/* =========================================================== ingredients */
.ingredients {
  /* the badge row is pulled up out of the brown panel and floats over the
     white pricing block above — this lead-in reserves the room for it */
  padding-top: 90px;
  position: relative;
  z-index: 33;
}

.ingredients__panel {
  padding: 30px 20px 60px;
  background: var(--c-brown);
  font-family: Arial, sans-serif;
  color: var(--c-white);
}

.ingredients__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin: -60px 0 50px;
}

.seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  padding: 20px 10px;
  border-radius: 12px;
  background: #f7e1ce;
  color: var(--c-brown-soft);
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, .05);
}

.seal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  overflow: hidden;
}

.seal__icon img { max-width: 60px; max-height: 60px; }

.seal__label { font-size: 13px; font-weight: 700; line-height: 1.2; }

.ingredients__heading {
  max-width: 800px;
  margin: 0 auto 50px;
  text-align: center;
}

.ingredients__title {
  margin-bottom: 15px;
  font-family: var(--ff-roboto);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}

.ingredients__lead { font-size: 16px; line-height: 1.5; color: #f0f0f0; }

.ingredients__layout {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  max-width: 1200px;
  margin-inline: auto;
}

.ingredients__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.ingredients__product {
  flex: 0 1 300px;
  position: relative;
  z-index: 2;
  text-align: center;
}

.ingredients__product img {
  width: 100%;
  max-width: 250px;
  margin-inline: auto;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, .3));
}

.ingredient {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ingredient__text { flex: 1; }

.ingredient__title {
  margin-bottom: 8px;
  font-family: var(--ff-roboto);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.ingredient__desc {
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .85);
}

.ingredient__media {
  flex: none;
  display: block;
  width: 90px;
  height: 90px;
  border: 3px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
}

.ingredient__media img { width: 100%; height: 100%; object-fit: cover; }

.ingredients__col--left .ingredient { text-align: right; }
.ingredients__col--right .ingredient { flex-direction: row-reverse; text-align: left; }

@media (max-width: 991px) {
  .ingredients__layout { flex-direction: column; gap: 50px; }
  .ingredients__product { order: -1; }
  .ingredients__col--left .ingredient,
  .ingredients__col--right .ingredient { flex-direction: row-reverse; text-align: left; }
  .ingredients__title { font-size: 26px; }
}

@media (max-width: 480px) {
  .seal { width: 45%; padding: 15px 5px; }
}


/* =========================================================== cta band */
.cta-band {
  padding: 0 10px 40px;
  background: var(--c-brown);
}

.cta-band__btn { width: 29%; margin-inline: auto; margin-bottom: 5px; }

@media (max-width: 767px) {
  .cta-band__btn { width: 95%; margin-bottom: 10px; }
}


/* =========================================================== guarantee */
.guarantee {
  padding: 44px 10px;
  background: var(--c-brown-dark);
}

.guarantee__inner {
  max-width: 1140px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.guarantee__badge { width: 30%; padding: 10px; display: flex; flex-direction: column; }

.guarantee__content {
  width: 70%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.guarantee__title,
.guarantee__text { width: 93%; }

.guarantee__title {
  margin: 8px 0 6px;
  font: 900 35px/1.2 var(--ff-nunito);
  color: var(--c-white);
}

.guarantee__title-accent { color: #ff0; }

.guarantee__text {
  margin-bottom: 20px;
  font: 400 20px/1.5 var(--ff-nunito);
  color: var(--c-white);
}

.guarantee__seals {
  width: 65%;
  display: flex;
  gap: 20px;
}

.guarantee__seal { min-width: 0; }

.guarantee__seal img {
  display: block;
  width: 100%;
  background: var(--c-white);
  padding: 2px;
  border-radius: 99px;
}

@media (max-width: 767px) {
  .guarantee { padding: 35px 15px; }
  .guarantee__inner { flex-direction: column; max-width: 360px; }
  .guarantee__badge,
  .guarantee__content,
  .guarantee__seals { width: 100%; }
  .guarantee__badge img { margin-inline: auto; }
  .guarantee__title { font-size: 28px; text-align: center; }
  .guarantee__text { font-size: 18px; line-height: 1.2em; }
  .guarantee__seals { flex-wrap: wrap; justify-content: center; align-items: center; }
  .guarantee__seal { flex: none; width: 55px; }
}


/* =========================================================== reviews */
.reviews {
  padding-top: 40px;
  background: var(--c-page-soft);
}

.reviews__header { margin-bottom: 40px; text-align: center; }

.reviews__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
  font-size: 1.2rem;
  color: var(--c-star);
}

.reviews__rating {
  margin-left: 5px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--c-review-ink);
}

.reviews__title {
  font: 800 2.2rem/1.2 var(--ff-roboto);
  color: var(--c-review-ink);
}

.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding: 0 20px;
}

.review {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-white);
  box-shadow: 0 10px 25px rgba(0, 0, 0, .05);
}

.review__media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #eaeaea;
}

.review__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.review__score {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(0, 0, 0, .65);
  color: var(--c-white);
  font-size: .85rem;
  font-weight: 700;
}

.review__star { color: var(--c-star); }

.review__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 20px;
}

.review__name {
  margin-bottom: 10px;
  font-family: var(--ff-roboto);
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--c-review-ink);
}

.review__text {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--c-review-text);
}

.shipping-note {
  position: relative;
  margin-top: 80px;
  padding: 60px 20px 40px;
  background: var(--c-brown);
  text-align: center;
}

.shipping-note__seal {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  border-radius: 50%;
  background: var(--c-white);
}

.shipping-note__seal img { width: 100%; border-radius: 50%; object-fit: contain; }

.shipping-note__title {
  margin-bottom: 10px;
  font-family: var(--ff-roboto);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--c-white);
}

.shipping-note__sub { font-size: 1rem; color: var(--c-white); }

@media (max-width: 1024px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); gap: 25px; }
}

@media (max-width: 600px) {
  .reviews__grid { grid-template-columns: 1fr; max-width: 400px; }
  .reviews__title { font-size: 1.8rem; }
  .shipping-note__title { font-size: 1.4rem; }
}


/* =========================================================== 60-day promise */
.promise {
  min-height: 329px;
  padding: 0 10px;
  background: var(--c-brown-alt);
  display: flex;
  align-items: center;
}

.promise__inner {
  width: 70%;
  padding: 10px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.promise__badge {
  /* 69% of the badge's own 360px artwork, or of the column when that is narrower */
  width: calc(min(100%, 360px) * .69);
  margin: -110px auto -30px;
  filter: brightness(97%) contrast(111%) saturate(200%) hue-rotate(206deg);
}

.promise__title,
.promise__text { width: 93%; }

.promise__title {
  margin: 28px 0 6px; /* 20px column gap + the theme's 8px <h3> top margin */
  font: 900 35px/1.2 var(--ff-nunito);
  color: var(--c-white);
}

.promise__text {
  padding-bottom: 44px;
  font: 400 20px/1.5 var(--ff-nunito);
  color: var(--c-white);
}

@media (max-width: 767px) {
  .promise { padding: 35px 15px; }
  .promise__inner { width: 100%; max-width: 360px; padding: 0; }
  .promise__title { font-size: 28px; }
  .promise__text { font-size: 18px; line-height: 1.2em; }
}


/* =========================================================== comments */
.comments { padding: 33px 0; }

.comments__inner { max-width: 929px; margin-inline: auto; }

.comments__board {
  padding: 10px;
  border: 1px solid var(--c-hairline);
  border-radius: 20px;
}

.comment {
  display: flex;
  gap: 20px;
  padding: 20px 20px 40px;
}

.comment--reply { padding-left: 110px; }

.comment__avatar {
  flex: none;
  width: 51px;
  height: 54px;
  border-radius: 200px;
  object-fit: cover;
  object-position: center;
}

.comment__bubble {
  flex: 1;
  padding: 20px;
  border-radius: 10px;
  background: var(--c-fb-bubble);
}

.comment__author {
  font: 800 18px/1 var(--ff-roboto);
  color: var(--c-fb-name);
}

.comment__text {
  margin-top: 20px;
  font: 300 18px/25px var(--ff-roboto);
  color: var(--c-ink);
}

.comment__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -50px;
}

.comment__actions {
  align-self: flex-start;
  padding-top: 20px;
  font: 200 14px/25px var(--ff-roboto);
  color: var(--c-fb-muted);
}

.comment__reactions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 70px;
  padding: 2px 3px;
  border: 1px solid var(--c-hairline);
  border-radius: 200px;
  background: var(--c-white);
}

.comment__reaction-icons { width: 60%; margin-top: -5px; }

.comment__count {
  font: 300 14px/25px var(--ff-roboto);
  color: var(--c-fb-muted);
}

.comments__closed {
  padding: 10px 20px 11px;
  font: 600 13px/1 var(--ff-poppins);
  color: #686868;
  text-align: center;
}

@media (max-width: 1024px) {
  .comment { gap: 5px; }
  .comment__bubble { padding: 10px; }
}

@media (max-width: 767px) {
  .comment,
  .comment--reply { flex-wrap: wrap; padding: 10px 10px 40px; }
  .comment__avatar { width: 40px; height: 39px; }
  .comment__bubble { flex: 0 1 250px; padding-bottom: 0; }
  .comment__text { font-size: 16px; }
  .comment__actions { font-size: 12px; }
  .comment__meta { margin-bottom: -30px; }
  .comment__reactions { width: 40%; }
  .comment__reaction-icons { max-width: 77%; }
  .comments__closed { padding: 0; font-size: 16px; }
}


/* =========================================================== footer */
.page-footer {
  padding: 22px 10px;
  background: var(--c-footer);
}

.page-footer__text {
  max-width: 80em;
  margin-inline: auto;
  font: 400 13px/1 var(--ff-poppins);
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

@media (max-width: 767px) {
  .page-footer { padding: 1em; }
}