/** Shopify CDN: Minification failed

Line 1492:0 Unexpected "`"
Line 1523:0 Unexpected "<"
Line 1526:3 Expected identifier but found "%"
Line 1527:4 Unexpected "<"
Line 1533:3 Expected identifier but found "%"
Line 1534:4 Unexpected "<"
Line 1535:3 Expected identifier but found "%"
Line 1536:0 Unexpected "<"

**/

/* =========================================================
   MAN SCHOOL HQ — MASTER CSS
   Shopify Clean Architecture
   ---------------------------------------------------------
   Use with:
   - Shopify native header
   - Shopify native Dawn product information section
   - Shopify native product price / form / buy buttons / apps
   - Custom Liquid below-fold content only
   ========================================================= */


/* =========================================================
   1. Brand variables + base scope
   ========================================================= */

.mshq,
.mshq * {
  box-sizing: border-box;
}

.mshq {
  --ink: #071827;
  --navy: #071827;
  --navy-2: #0b1b2f;
  --cream: #fffdf8;
  --cream-2: #f7f1e7;
  --line: #ded2be;
  --muted: #596272;
  --red: #d6433f;
  --red-dark: #bd3431;
  --gold: #c89838;
  --green: #3f6f50;

  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mshq img {
  max-width: 100%;
  height: auto;
  display: block;
}

.mshq a {
  color: inherit;
  text-decoration: none;
}

.mshq p,
.mshq h1,
.mshq h2,
.mshq h3,
.mshq h4 {
  margin-top: 0;
}

.mshq-wrap {
  width: min(1120px, calc(100% - 36px));
  margin: 0 auto;
}

.mshq-section {
  padding: 46px 0;
}

.mshq-section--tight {
  padding: 34px 0;
}

.mshq-red {
  color: var(--red);
}

.mshq-muted {
  color: var(--muted);
}

html,
body {
  overflow-x: hidden;
}


/* =========================================================
   2. Typography
   ========================================================= */

.mshq-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mshq h1,
.mshq h2,
.mshq-display {
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.mshq h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: .96;
  margin-bottom: 14px;
}

.mshq h2 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: .98;
  margin-bottom: 12px;
}

.mshq h3 {
  font-size: 19px;
  line-height: 1.18;
  font-weight: 850;
  margin-bottom: 6px;
}

.mshq-lead {
  max-width: 560px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 20px;
}

.mshq-seo-intro {
  max-width: 520px;
  color: #4f5968;
  font-size: 14.2px;
  line-height: 1.45;
  font-weight: 650;
  margin: 12px 0 18px;
}


/* =========================================================
   3. Buttons
   ========================================================= */

.mshq-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.mshq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 9px;
  border: 2px solid var(--ink);
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
}

.mshq-btn--red {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  box-shadow: 0 12px 24px rgba(214, 67, 63, .22);
}

.mshq-btn--red:hover {
  background: var(--red-dark);
  border-color: var(--red-dark);
}

.mshq-btn--outline {
  background: transparent;
  color: var(--ink);
}


/* =========================================================
   4. Homepage hero
   ========================================================= */

.mshq-hero {
  padding: 30px 0 30px;
}

.mshq-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
  gap: 34px;
  align-items: center;
}

.mshq-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 12px;
}

.mshq-stars {
  color: var(--gold);
  letter-spacing: .1em;
}

.mshq-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  letter-spacing: .02em;
  margin-top: 8px;
}

.mshq-price small {
  color: #616978;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.mshq-hero-art img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  object-position: center center;
}


/* =========================================================
   5. Native Dawn product section — ManSchool hero styling
   ========================================================= */

/* Buy-anchor scroll position */
#buy,
.mshq-buy-anchor {
  display: block;
  height: 1px;
  scroll-margin-top: 92px;
}

/* Product section container */
.product {
  background: #fffdf8 !important;
  color: #071827 !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 34px 22px 40px !important;
  overflow: hidden !important;
}

/* Dawn product grid — make native product behave like the hero */
.product.grid,
.product.product--large,
.product.product--medium,
.product.product--small {
  display: grid !important;
  grid-template-columns: minmax(360px, .9fr) minmax(460px, 1.1fr) !important;
  gap: 44px !important;
  align-items: center !important;
}

/* Put the real Shopify product information on the left */
.product__info-wrapper {
  order: 1 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Put the real Shopify product image/media on the right */
.product__media-wrapper {
  order: 2 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}

/* Product information column */
.product__info-container {
  max-width: 540px !important;
  margin: 0 !important;
  color: #071827 !important;
}

/* Product title */
.product__title,
.product__title h1,
.product__info-container h1 {
  color: #071827 !important;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  font-size: clamp(34px, 4.2vw, 54px) !important;
  line-height: .96 !important;
  margin: 0 0 12px !important;
}

/* Product price */
.product__info-container .price,
.product__info-container .price *,
.product__info-container .price__regular,
.product__info-container .price-item {
  color: #071827 !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  font-weight: 950 !important;
  letter-spacing: .01em !important;
}

/* Product description */
.product__description {
  max-width: 520px !important;
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}

.product__description,
.product__description p,
.product__description li,
.product__description strong,
.product__description b {
  color: #596272 !important;
  font-family: Inter, Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.product__description p {
  margin: 0 0 10px !important;
}

.product__description strong,
.product__description b {
  color: #071827 !important;
  font-weight: 850 !important;
}

.product__description a {
  color: #071827 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Product media */
.product__media-list {
  margin: 0 !important;
}

.product__media-item {
  width: 100% !important;
  max-width: 100% !important;
}

.product__media,
.product__media.media,
.product__media.global-media-settings {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.product__media img,
.product__media-image {
  width: 100% !important;
  max-height: 430px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
}

/* Remove Dawn media outlines that can look like accidental borders */
.global-media-settings,
.global-media-settings:after,
.product__media.media,
.product__media.media:after {
  border: 0 !important;
  box-shadow: none !important;
}

/* Quantity / variant / form labels */
.product-form__input label,
.quantity__label,
.product__tax,
.product__text,
.product__inventory,
.product__sku {
  color: #596272 !important;
}

/* Quantity selector */
.quantity {
  border-color: #ded2be !important;
  background: #fff !important;
}

.quantity__button,
.quantity__input {
  color: #071827 !important;
}

/* Native Shopify submit button */
.product-form__submit {
  min-height: 52px !important;
  background: #d6433f !important;
  color: #ffffff !important;
  border: 2px solid #d6433f !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 12px 24px rgba(214, 67, 63, .22) !important;
}

.product-form__submit:hover {
  background: #bd3431 !important;
  border-color: #bd3431 !important;
}

/* Dynamic checkout button */
.shopify-payment-button__button {
  min-height: 50px !important;
  border-radius: 9px !important;
  background: #071827 !important;
  color: #fffdf8 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* Recipient/gifting/course app blocks should remain readable */
.product__info-container input,
.product__info-container textarea,
.product__info-container select {
  color: #071827 !important;
  background: #ffffff !important;
  border-color: #ded2be !important;
}

.product__info-container input::placeholder,
.product__info-container textarea::placeholder {
  color: #7a8290 !important;
}


/* =========================================================
   6. Feature rail
   ========================================================= */

.mshq-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.mshq-feature {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: start;
  padding: 20px 18px;
  border-right: 1px solid var(--line);
}

.mshq-feature:last-child {
  border-right: 0;
}

.mshq-feature-icon {
  width: 34px;
  height: 34px;
  color: var(--ink);
}

.mshq-feature-icon svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mshq-feature h3 {
  font-size: 15px;
  line-height: 1.1;
  margin-bottom: 3px;
}

.mshq-feature p {
  margin: 0;
  color: var(--muted);
  font-size: 12.8px;
  line-height: 1.35;
}


/* =========================================================
   7. How it works
   ========================================================= */

.mshq-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

.mshq-step {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  padding: 18px;
  box-shadow: 0 12px 24px rgba(7, 24, 39, .06);
}

.mshq-step:nth-child(2) {
  border-top-color: var(--gold);
}

.mshq-step:nth-child(3) {
  border-top-color: var(--green);
}

.mshq-step-num {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 17px;
  font-weight: 950;
}

.mshq-step p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.42;
}


/* =========================================================
   8. Recognition / moments section
   ========================================================= */

.mshq-moments {
  background: var(--navy);
  color: #fff;
  padding: 46px 0;
  overflow: hidden;
}

.mshq-moments-head {
  text-align: center;
  margin: 0 auto 22px;
}

.mshq-moments-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  color: var(--gold);
  margin-bottom: 12px;
}

.mshq-moments-rule::before,
.mshq-moments-rule::after {
  content: "";
  width: 54px;
  height: 1px;
  background: rgba(200, 152, 56, .75);
}

.mshq-moments h2 {
  color: #fff;
  font-size: clamp(29px, 4vw, 42px);
  margin-bottom: 10px;
}

.mshq-moments-head p {
  max-width: 640px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .76);
  font-size: 14.6px;
  line-height: 1.45;
}

.mshq-moment-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
}

.mshq-moment-card {
  background: #fffdf8;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .22);
}

.mshq-moment-card-head {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #fff;
  text-align: center;
  padding: 12px 14px 11px;
}

.mshq-moment-card-head span {
  display: block;
  color: var(--gold);
  font-size: 9.5px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

.mshq-moment-card-head h3 {
  margin: 0;
  color: #fff;
  font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 24px;
  line-height: .98;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mshq-ba-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
  background: #fffdf8;
}

.mshq-ba-row.after {
  background: #f7f4ec;
}

.mshq-ba-row small {
  display: block;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mshq-ba-row.before small {
  color: #ad3e3a;
}

.mshq-ba-row.after small {
  color: var(--green);
}

.mshq-ba-row p {
  margin: 0;
  color: var(--ink);
  font-size: 15.2px;
  line-height: 1.35;
  font-weight: 400;
}

.mshq-ba-row em {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.3px;
  font-style: normal;
  font-weight: 650;
}

.mshq-moment-foot {
  background: #fbf7ee;
  color: #4f5968;
  font-size: 12px;
  line-height: 1.38;
  padding: 12px 15px;
}

.mshq-swipe-cue {
  display: none;
}

.mshq-moments-action {
  text-align: center;
  margin: 18px auto 0;
}

.mshq-moments-action p {
  color: rgba(255, 255, 255, .8);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.mshq-moments-action a {
  display: inline-flex;
  color: var(--gold);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 4px;
  font-size: 13.2px;
  font-weight: 950;
}


/* =========================================================
   9. Lesson cards
   ========================================================= */

.mshq-lesson-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.mshq-lesson-card {
  display: grid;
  grid-template-rows: 170px 1fr;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(7, 24, 39, .06);
  overflow: hidden;
}

.mshq-lesson-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mshq-lesson-copy {
  padding: 16px;
}

.mshq-lesson-tag {
  display: block;
  color: var(--red);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.mshq-lesson-copy h3 {
  font-size: 18px;
  line-height: 1.14;
  margin-bottom: 7px;
}

.mshq-lesson-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13.4px;
  line-height: 1.38;
}


/* =========================================================
   10. Testimonials
   ========================================================= */

.mshq-testimonials {
  background: var(--navy);
  color: #fff;
  padding: 40px 0;
}

.mshq-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.mshq-testimonial {
  background: #fff;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 18px;
}

.mshq-testimonial .mshq-stars {
  margin-bottom: 8px;
}

.mshq-testimonial p {
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.42;
  margin-bottom: 12px;
}

.mshq-testimonial cite {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  font-style: normal;
}


/* =========================================================
   11. FAQs
   ========================================================= */

.mshq-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}

.mshq-faq-grid details {
  background: #fff;
  border: 1px solid var(--line);
  padding: 15px 16px;
}

.mshq-faq-grid summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 900;
  letter-spacing: .02em;
}

.mshq-faq-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}


/* =========================================================
   12. Final CTA
   ========================================================= */

.mshq-final {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: 46px 0 54px;
}

.mshq-final h2 {
  color: #fff;
  font-size: clamp(30px, 4vw, 46px);
  margin-bottom: 10px;
}

.mshq-final p {
  max-width: 620px;
  margin: 0 auto 22px;
  color: rgba(255, 255, 255, .72);
  font-size: 15px;
  line-height: 1.4;
}


/* =========================================================
   13. Sticky buy
   ========================================================= */

.mshq-sticky-buy {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(760px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px 10px 16px;
  background: rgba(7, 24, 39, .96);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 42px rgba(7, 24, 39, .26);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
}

.mshq-sticky-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.mshq-sticky-copy strong {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.mshq-sticky-copy span {
  color: rgba(255, 255, 255, .72);
  font-size: 12.4px;
  line-height: 1.2;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mshq-sticky-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  background: var(--red);
  color: #fff !important;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =========================================================
   14. Footer
   ========================================================= */

.mshq-footer,
.mshq-footer * {
  box-sizing: border-box;
}

.mshq-footer {
  width: 100%;
  background: #071827;
  color: #fffdf8;
  border-top: 1px solid rgba(200, 152, 56, .55);
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.mshq-footer__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 18px 92px;
}

.mshq-footer__main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.4fr;
  gap: 28px;
  padding-bottom: 22px;
}

.mshq-footer__col h3,
.mshq-footer__note h3 {
  margin: 0 0 10px;
  color: #c89838;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mshq-footer__col a {
  display: block;
  color: rgba(255, 253, 248, .76);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  margin: 0 0 7px;
}

.mshq-footer__col a:hover {
  color: #fffdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mshq-footer__note p {
  max-width: 380px;
  margin: 0;
  color: rgba(255, 253, 248, .68);
  font-size: 13px;
  line-height: 1.45;
}

.mshq-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.mshq-footer__bottom p {
  margin: 0;
  color: rgba(255, 253, 248, .52);
  font-size: 11.5px;
  line-height: 1.3;
}


/* =========================================================
   15. Mobile
   ========================================================= */

@media (max-width: 860px) {
  .mshq-wrap {
    width: calc(100% - 28px);
  }

  .mshq-section {
    padding: 32px 0;
  }

  .mshq-section--tight {
    padding: 26px 0;
  }

  .mshq h1 {
    font-size: clamp(27px, 8.1vw, 35px);
    line-height: .97;
  }

  .mshq h2 {
    font-size: 27px;
    line-height: 1.02;
  }

  .mshq-lead,
  .mshq-seo-intro {
    font-size: 13.8px;
    line-height: 1.38;
    margin-bottom: 14px;
  }

  .mshq-hero {
    padding: 18px 0 22px;
  }

  .mshq-hero-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .mshq-hero-art {
    margin-top: 4px;
  }

  .mshq-hero-art img {
    max-height: 220px;
    object-fit: contain;
    margin: 0 auto;
  }

  .mshq-seo-intro {
    display: none;
  }

  .mshq-btn-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mshq-btn {
    width: 100%;
    min-height: 48px;
    font-size: 12.5px;
  }

  .mshq-price {
    font-size: 15.5px;
  }

  /* Native product section mobile */
  .product {
    padding: 18px 14px 28px !important;
  }

  .product.grid,
  .product.product--large,
  .product.product--medium,
  .product.product--small {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .product__info-wrapper {
    order: 1 !important;
  }

  .product__media-wrapper {
    order: 2 !important;
    margin-bottom: 0 !important;
  }

  .product__info-container {
    max-width: none !important;
  }

  .product__title,
  .product__title h1,
  .product__info-container h1 {
    font-size: clamp(28px, 8.3vw, 35px) !important;
    line-height: .97 !important;
    margin-bottom: 10px !important;
  }

  .product__description,
  .product__description p,
  .product__description li {
    font-size: 13.8px !important;
    line-height: 1.4 !important;
  }

  .product__media img,
  .product__media-image {
    max-height: 280px !important;
    object-fit: contain !important;
  }

  .product-form__submit,
  .shopify-payment-button__button {
    min-height: 48px !important;
    width: 100% !important;
  }

  /* Feature rail */
  .mshq-feature-grid {
    grid-template-columns: 1fr;
  }

  .mshq-feature {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: 40px 1fr;
    padding: 12px;
  }

  .mshq-feature:last-child {
    border-bottom: 0;
  }

  .mshq-feature-icon,
  .mshq-feature-icon svg {
    width: 30px;
    height: 30px;
  }

  .mshq-feature h3 {
    font-size: 16px;
    font-weight: 550;
  }

  .mshq-feature p {
    font-size: 13.2px;
    line-height: 1.28;
  }

  /* Steps */
  .mshq-steps {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mshq-step {
    grid-template-columns: 52px 1fr;
    padding: 14px;
  }

  .mshq-step-num {
    width: 46px;
    height: 46px;
  }

  /* Moments */
  .mshq-moments {
    padding: 24px 0;
  }

  .mshq-moments-head {
    margin-bottom: 14px;
    padding: 0 10px;
  }

  .mshq-moments-rule {
    margin-bottom: 8px;
  }

  .mshq-moments-rule::before,
  .mshq-moments-rule::after {
    width: 42px;
  }

  .mshq-moments h2 {
    font-size: 25px;
    line-height: 1.02;
  }

  .mshq-moments-head p {
    max-width: 310px;
    font-size: 13.4px;
    line-height: 1.38;
  }

  .mshq-moment-track {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 8px 14px;
    scrollbar-width: none;
  }

  .mshq-moment-track::-webkit-scrollbar {
    display: none;
  }

  .mshq-moment-card {
    flex: 0 0 80%;
    scroll-snap-align: center;
  }

  .mshq-moment-card:last-child {
    margin-right: 18px;
  }

  .mshq-moment-card-head {
    padding: 10px 12px 9px;
  }

  .mshq-moment-card-head span {
    font-size: 9px;
    margin-bottom: 4px;
  }

  .mshq-moment-card-head h3 {
    font-size: 21px;
  }

  .mshq-ba-row {
    grid-template-columns: 76px 1fr;
    gap: 8px;
    padding: 10px 12px;
  }

  .mshq-ba-row small {
    font-size: 10px;
  }

  .mshq-ba-row p {
    font-size: 14.2px;
    line-height: 1.32;
  }

  .mshq-moment-foot {
    font-size: 11.2px;
    line-height: 1.34;
    padding: 10px 12px;
  }

  .mshq-swipe-cue {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .68);
    font-size: 10.5px;
    line-height: 1;
    margin: 4px 0 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 950;
  }

  .mshq-swipe-cue span {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
  }

  .mshq-swipe-cue span:first-child {
    background: var(--gold);
  }

  /* Lesson cards */
  .mshq-lesson-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mshq-lesson-card {
    grid-template-columns: 34% 66%;
    grid-template-rows: none;
    min-height: 122px;
  }

  .mshq-lesson-card img {
    height: 100%;
    min-height: 122px;
    object-fit: cover;
    object-position: center center;
  }

  .mshq-lesson-copy {
    padding: 12px 13px;
  }

  .mshq-lesson-copy h3 {
    font-size: 17px;
    line-height: 1.12;
    font-weight: 550;
  }

  .mshq-lesson-copy p {
    font-size: 13.5px;
    line-height: 1.35;
  }

  .mshq-testimonial-grid,
  .mshq-faq-grid {
    grid-template-columns: 1fr;
  }

  .mshq-final {
    padding: 30px 0 34px;
  }

  .mshq-final h2 {
    font-size: 26px;
  }

  .mshq-final p {
    font-size: 14.2px;
    line-height: 1.35;
  }

  /* Sticky buy */
  .mshq-sticky-buy {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    transform: none;
    border-radius: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    gap: 10px;
  }

  .mshq-sticky-copy {
    flex: 0 0 102px;
    text-align: center;
  }

  .mshq-sticky-copy strong {
    font-size: 15.5px;
  }

  .mshq-sticky-copy span {
    display: none;
  }

  .mshq-sticky-btn {
    flex: 1 1 auto;
    width: 100%;
    padding: 0 10px;
    font-size: 0;
  }

  .mshq-sticky-btn::after {
    content: "Back to buy";
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  /* Footer */
  .mshq-footer__inner {
    width: calc(100% - 28px);
    padding: 24px 0 92px;
  }

  .mshq-footer__main {
    grid-template-columns: 1fr 1fr;
    gap: 20px 18px;
    padding-bottom: 20px;
  }

  .mshq-footer__note {
    grid-column: 1 / -1;
  }

  .mshq-footer__note p {
    max-width: none;
    font-size: 12.8px;
  }

  .mshq-footer__bottom {
    display: block;
  }

  .mshq-footer__bottom p + p {
    margin-top: 6px;
  }
}
```
/* TEMP DIAGNOSTIC — force native product media visible */

.product__media-wrapper {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: 1 !important;
  min-height: 260px !important;
  background: rgba(214, 67, 63, .08) !important;
}

.product__media-list,
.product__media-item,
.product__media,
.product__media img {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.product__media img {
  outline: 3px solid #d6433f !important;
}

<div class="mshq-media-diagnostic" style="margin-top:20px;padding:16px;border:2px solid #D6433F;background:#FFFDF8;color:#071827;">
  <p style="margin:0 0 10px;font-weight:800;">Product image diagnostic</p>

  {% if product.featured_image %}
    <p style="margin:0 0 10px;">Featured image is available.</p>
    <img
      src="{{ product.featured_image | image_url: width: 900 }}"
      alt="{{ product.featured_image.alt | escape }}"
      style="display:block;width:100%;max-width:520px;height:auto;border:3px solid #D6433F;"
    >
  {% else %}
    <p style="margin:0;color:#D6433F;font-weight:800;">No product.featured_image is available.</p>
  {% endif %}
</div>

/* =========================================================
   Product hero layout correction
   Makes the native Product Information section behave like
   the original ManSchool two-column hero while keeping the
   real Shopify price, buy buttons and apps intact.
   ========================================================= */

/* Desktop: make the product information container the hero grid */
@media (min-width: 861px) {
  .product {
    max-width: 1320px !important;
    padding: 42px 42px 48px !important;
  }

  .product.grid,
  .product.product--large,
  .product.product--medium,
  .product.product--small {
    display: block !important;
  }

  .product__info-wrapper {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .product__info-container {
    display: grid !important;
    grid-template-columns: minmax(390px, .82fr) minmax(620px, 1.18fr) !important;
    column-gap: 58px !important;
    row-gap: 12px !important;
    align-items: center !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Default all native product blocks to the left column */
  .product__info-container > * {
    grid-column: 1 !important;
    max-width: 560px !important;
  }

  /* Let the custom marketing block release its inner children into the grid */
  .product__info-container .mshq-native-product-copy {
    display: contents !important;
  }

  .product__info-container .mshq-native-product-copy__text {
    grid-column: 1 !important;
    grid-row: 1 !important;
    max-width: 560px !important;
  }

  .product__info-container .mshq-native-product-copy__image {
    grid-column: 2 !important;
    grid-row: 1 / span 8 !important;
    align-self: center !important;
    justify-self: stretch !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .product__info-container .mshq-native-product-copy__image img {
    width: 100% !important;
    max-height: 395px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Keep price and native buy area visually aligned under the copy */
  .product__info-container .price,
  .product__info-container product-form,
  .product__info-container .product-form,
  .product__info-container .shopify-payment-button,
  .product__info-container .mshq-product-reassurance {
    grid-column: 1 !important;
    max-width: 440px !important;
  }

  .product__info-container .price {
    margin-top: 6px !important;
    margin-bottom: 10px !important;
  }

  .product__info-container .product-form {
    margin-top: 8px !important;
  }

  .product-form__submit,
  .shopify-payment-button__button {
    max-width: 440px !important;
  }

  /* Native description sits below purchase controls on the left */
  .product__description {
    grid-column: 1 !important;
    max-width: 520px !important;
    margin-top: 14px !important;
  }
}

/* Mobile: keep a clean single-column purchase flow */
@media (max-width: 860px) {
  .product {
    padding: 24px 22px 30px !important;
  }

  .product__info-container {
    display: block !important;
    max-width: none !important;
    width: 100% !important;
  }

  .product__info-container .mshq-native-product-copy {
    display: block !important;
  }

  .product__info-container .mshq-native-product-copy__text {
    max-width: none !important;
  }

  .product__info-container .mshq-native-product-copy__image {
    margin: 20px 0 18px !important;
    width: 100% !important;
  }

  .product__info-container .mshq-native-product-copy__image img {
    width: 100% !important;
    max-height: 245px !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .product__info-container .price {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }

  .product-form__submit,
  .shopify-payment-button__button {
    width: 100% !important;
    max-width: none !important;
  }
}

/* =========================================================
   FAQ EXPAND INDICATOR — Buyer Reassurance accordions
   ---------------------------------------------------------
   Purpose:
   Adds a small red circular "+" button to the right side of
   each FAQ / Buyer Reassurance question so shoppers understand
   the row can be expanded.

   Scope:
   Only affects FAQ accordions inside .mshq-faq-grid that use:
   <details>
     <summary>Question</summary>
     <p>Answer</p>
   </details>

   Behaviour:
   - Closed FAQ row shows a red "+"
   - Open FAQ row shows a red "–"
   - Native browser disclosure triangle is hidden
   ========================================================= */

.mshq-faq-grid details summary {
  position: relative;
  display: block;
  padding-right: 38px;
  list-style: none;
}

.mshq-faq-grid details summary::-webkit-details-marker {
  display: none;
}

.mshq-faq-grid details summary::marker {
  content: "";
}

.mshq-faq-grid details summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
  box-shadow: 0 6px 12px rgba(214, 67, 63, .18);
}

.mshq-faq-grid details[open] summary::after {
  content: "–";
  font-size: 20px;
  line-height: 1;
}

/* Mobile refinement: keep the button readable without crowding the question */

@media (max-width: 860px) {
  .mshq-faq-grid details summary {
    padding-right: 34px;
  }

  .mshq-faq-grid details summary::after {
    width: 22px;
    height: 22px;
    font-size: 16px;
  }

  .mshq-faq-grid details[open] summary::after {
    font-size: 18px;
  }
}

/* =========================================================
   PAGE-SPECIFIC STEP CARD BORDER OVERRIDE
   ---------------------------------------------------------
   Purpose:
   Keeps all step/card top borders RED on the husband-gift
   landing page, rather than rotating red / gold / green.

   Why:
   The master CSS intentionally rotates .mshq-step top borders:
   - default = red
   - 2nd card = gold
   - 3rd card = green

   On this page, that felt visually too busy. This override keeps
   the page tighter and more consistent with the red/navy system.

   Scope:
   Only applies when the Custom Liquid wrapper includes:
   <div class="mshq mshq-product-below mshq-lp-husband-gift">

   This should not affect other ManSchool pages that do not use
   .mshq-lp-husband-gift.

   To remove:
   Delete this block and the master red/gold/green rotation will
   apply again.
   ========================================================= */

.mshq-lp-husband-gift .mshq-steps .mshq-step {
  border-top-color: var(--red) !important;
}
/* =========================================================
   HUSBAND-GIFT PAGE — EMOTIONAL RECOGNITION CARDS
   ---------------------------------------------------------
   Purpose:
   Adds a page-specific card treatment for the "Eligibility
   Assessment" section so it feels like emotional recognition
   ("oh my God, this is him") rather than an operational process.

   Why:
   The existing .mshq-step cards work well for process sections
   like "How enrollment works", but they make the eligibility
   signs feel too procedural. This treatment keeps the ManSchool
   visual language, but makes the signs feel more like recognition
   cards.

   Scope:
   Only applies when the Custom Liquid wrapper includes:
   <div class="mshq mshq-product-below mshq-lp-husband-gift">

   Classes used by this feature:
   - .mshq-recognition-grid
   - .mshq-recognition-card

   Also keeps all .mshq-step top borders red on this page so the
   page stays visually tighter and avoids red / gold / green
   rotation in process cards.

   To revert:
   Delete this entire block and replace the Eligibility section
   with the earlier .mshq-steps version if required.
   ========================================================= */

.mshq-lp-husband-gift .mshq-steps .mshq-step {
  border-top-color: var(--red) !important;
}

.mshq-lp-husband-gift .mshq-recognition-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
}

.mshq-lp-husband-gift .mshq-recognition-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  padding: 22px 20px 20px;
  box-shadow: 0 12px 24px rgba(7, 24, 39, .06);
  min-height: 178px;
  overflow: hidden;
}

.mshq-lp-husband-gift .mshq-recognition-card::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(214, 67, 63, .10);
  border-radius: 50%;
}

.mshq-lp-husband-gift .mshq-recognition-card b {
  display: block;
  color: var(--red);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.mshq-lp-husband-gift .mshq-recognition-card h3 {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.18;
  font-weight: 850;
  margin: 0 0 9px;
}

.mshq-lp-husband-gift .mshq-recognition-card p {
  color: var(--muted);
  font-size: 13.8px;
  line-height: 1.43;
  font-weight: 500;
  margin: 0;
}

@media (max-width: 860px) {
  .mshq-lp-husband-gift .mshq-recognition-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .mshq-lp-husband-gift .mshq-recognition-card {
    min-height: 0;
    padding: 18px 16px;
  }

  .mshq-lp-husband-gift .mshq-recognition-card h3 {
    font-size: 18px;
    line-height: 1.17;
  }

  .mshq-lp-husband-gift .mshq-recognition-card p {
    font-size: 13.6px;
    line-height: 1.38;
  }
}
/* =========================================================
   ManSchool HQ — Cart Checkout Button Visibility Fix
   Brand-correct darker academic red.
   Additive / revertible: remove this block to revert.
   ========================================================= */

.cart__checkout-button,
.cart__ctas button[name="checkout"],
.cart__footer button[name="checkout"],
button#checkout {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 16px 28px !important;

  background: #bd3431 !important;
  color: #fffdf8 !important;
  border: 2px solid #bd3431 !important;
  border-radius: 10px !important;

  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: 0 10px 22px rgba(7, 24, 39, 0.16) !important;
  cursor: pointer !important;
}

.cart__checkout-button:hover,
.cart__ctas button[name="checkout"]:hover,
.cart__footer button[name="checkout"]:hover,
button#checkout:hover {
  background: #d6433f !important;
  border-color: #d6433f !important;
  color: #fffdf8 !important;
  transform: translateY(-1px);
}

.cart__checkout-button:focus-visible,
.cart__ctas button[name="checkout"]:focus-visible,
.cart__footer button[name="checkout"]:focus-visible,
button#checkout:focus-visible {
  outline: 3px solid rgba(200, 152, 56, 0.55) !important;
  outline-offset: 3px !important;
}

.cart__dynamic-checkout-buttons,
.additional-checkout-buttons {
  margin-top: 14px !important;
}
/* =========================================================
   HUSBAND-GIFT PAGE — v3 LAYOUT SUPPLEMENT
   Scoped, additive, revertible.
   ========================================================= */

/* A. Moments: stack + scroll on mobile instead of the swipe carousel */
@media (max-width: 860px){
  .mshq-lp-husband-gift .mshq-moment-track{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .mshq-lp-husband-gift .mshq-moment-card{
    flex: none;
    width: 100%;
    scroll-snap-align: none;
  }
  .mshq-lp-husband-gift .mshq-moment-card:last-child{ margin-right: 0; }
}

/* B. Two reasons: clean 2-up (recognition cards in a 2-column grid) */
.mshq-lp-husband-gift .mshq-reasons-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 26px;
}
@media (max-width: 860px){
  .mshq-lp-husband-gift .mshq-reasons-grid{ grid-template-columns: 1fr; gap: 12px; }
}

/* C. Testimonials header: centre it to match Moments/Final, and lift the
      lead colour so it's readable on navy (your .mshq-lead is dark by default) */
.mshq-lp-husband-gift .mshq-testimonials-head{
  text-align: center;
  max-width: 680px;
  margin: 0 auto 22px;
}
.mshq-lp-husband-gift .mshq-testimonials-head .mshq-kicker{ justify-content: center; }
.mshq-lp-husband-gift .mshq-testimonials-head .mshq-lead{
  max-width: 620px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .78);
}

/* D. Signs: let the one-line cards hug their content (no tall empty box) */
.mshq-lp-husband-gift #signs .mshq-recognition-card{ min-height: 0; }

.mshq-lp-husband-gift .mshq-testimonials-head h2 { color: #fff; }



/* =========================================================
   MOBILE MOMENTS — remove swipe carousel everywhere
   ---------------------------------------------------------
   Purpose:
   Stacks the "moments" cards vertically on mobile instead of
   making them horizontal swipe cards.

   Revert:
   Delete this block.
   ========================================================= */

@media (max-width: 860px) {
  .mshq .mshq-moment-track {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    overscroll-behavior-x: auto !important;
    -webkit-overflow-scrolling: auto !important;
    padding: 0 !important;
    margin: 0 auto !important;
    scrollbar-width: auto !important;
  }

  .mshq .mshq-moment-track::-webkit-scrollbar {
    display: initial !important;
  }

  .mshq .mshq-moment-card {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: none !important;
  }

  .mshq .mshq-moment-card:last-child {
    margin-right: 0 !important;
  }

  .mshq .mshq-swipe-cue {
    display: none !important;
  }
}