/* Meet Your Sweet: help, account, policy, thank-you and product-list pages (redesign of 2026-10-21).
   Only kit colours, fonts and tokens (see ms.css); the page structure comes from .ms-main / .ms-panel. */

/* ---------- Shared bits ---------- */
.st-h2 { font: 400 28px/1.25 var(--ms-head); color: var(--ms-berry); margin: 0 0 12px; }
.st-red { color: var(--ms-red); }
.ms-main .st-links { text-align: center; margin: 22px 0 0; font-size: 15px; color: var(--ms-muted); }
.st-links a { font-weight: 500; }
.ms-prose a { overflow-wrap: anywhere; }
/* the kit's ribbon heading, kept intact when it sits inside running text */
.ms-prose h2.ms-ribbon { margin: 34px -14px 22px; color: #fff; font: italic 400 24px/1.25 var(--ms-head); }
@media (max-width: 760px) { .ms-prose h2.ms-ribbon { margin: 28px -6px 20px; font-size: 21px; } }
.st-clear::after { content: ""; display: block; clear: both; }

/* Form fields: the kit's .ms-fl, widened to cover menus and message boxes */
.st-form { display: grid; gap: 16px; margin: 18px 0 0; }
.st-form > :first-child { margin-top: 0; }
.st-form .ms-btn { justify-self: start; }
.ms-fl select, .ms-fl textarea { display: block; width: 100%; padding: 13px 14px; font: 400 16px/1.3 var(--ms-sans); border: 1px solid #cfd3d8; border-radius: 8px; background: #fff; color: var(--ms-ink); }
.ms-fl select { appearance: auto; }
.ms-fl select:focus, .ms-fl textarea:focus { outline: 2px solid var(--ms-berry); outline-offset: 1px; border-color: var(--ms-berry); }
.ms-fl textarea { min-height: 160px; resize: vertical; }
.ms-fl small { display: block; font: 400 13px/1.4 var(--ms-sans); color: var(--ms-muted); margin-top: 5px; }
.st-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ms-main .st-or { text-align: center; font: 600 15px/1 var(--ms-cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ms-muted); margin: 0; }
.ms-btn.st-reset { background: #fff; color: var(--ms-char) !important; border: 1px solid #cfd3d8; box-shadow: none; }
.st-box { margin: 22px 0 18px; display: flow-root; }
.st-box h2 { font: 700 22px/1.3 var(--ms-sans); color: var(--ms-ink); margin: 0 0 10px; }
.st-box p { margin: 0 0 12px; }
.st-note { margin: 0 0 14px; }

/* ---------- Help page ---------- */
.st-intro { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; align-items: start; }
.st-intro img { display: block; width: 100%; height: auto; border-radius: var(--ms-radius); box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.st-intro p { margin: 0 0 14px; }
.st-intro p:last-child { margin-bottom: 0; }
.st-faq { display: flex; gap: 24px; align-items: flex-start; padding: 6px 0 24px; margin: 0 0 24px; border-bottom: 1px solid var(--ms-line); }
.st-faq:last-of-type { border-bottom: 0; margin-bottom: 8px; }
.st-faq > img { flex: none; width: 84px; height: auto; margin-top: 4px; }
.st-faq .st-faq-body { min-width: 0; }
.st-faq h3 { margin-top: 0; }
.st-faq p:last-child { margin-bottom: 0; }
.st-contact { margin-top: 12px; }
.st-contact h3 { margin-top: 0; }

/* Mini-course offer panel */
.st-mc { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.st-mc-copy p { margin: 0 0 16px; font-size: 16px; }
.st-mc-copy img { display: block; width: 100%; max-width: 420px; margin: 0 auto; }
.st-mc-form { background: var(--ms-grey); border: 1px solid var(--ms-line); border-top: 5px solid var(--ms-berry); border-radius: 12px; padding: 22px 24px 24px; }
.st-mc-form h2 { font: 400 25px/1.25 var(--ms-head); color: var(--ms-ink); text-align: center; margin: 0 0 8px; }
.st-mc-form > p { font-size: 15px; color: var(--ms-muted); text-align: center; margin: 0 0 12px; }

/* ---------- Members area login ---------- */
.st-two { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.st-two > .ms-panel { margin-top: 0; }
.st-two .ms-box { margin: 18px 0 0; }
.st-two .st-form { gap: 14px; }
.st-help h2 { font: 400 28px/1.25 var(--ms-head); color: var(--ms-berry); margin: 0 0 12px; }
.st-help p { margin: 0 0 14px; }
.st-help .fb-widget { margin-top: 18px; overflow: hidden; }
.st-split { border: 0; border-top: 1px solid var(--ms-line); margin: 30px 0; }

/* Unsubscribe */
.st-lockrow { display: flex; gap: 22px; align-items: center; }
.st-lockrow > img { flex: none; width: 96px; height: auto; }
.st-lockrow .st-form { flex: 1; margin: 0; }

/* ---------- Policy pages ---------- */
.st-policy .ms-prose h3 { margin-top: 28px; }
.st-policy .ms-prose ul ul, .st-policy .ms-prose li ul { margin-top: 8px; }
.st-policy .ms-prose li { margin-bottom: 10px; }

/* ---------- Thank-you page ---------- */
.th-hero { text-align: center; }
.th-hero .ms-page-title { margin-bottom: 14px; }
.th-hero p { font-size: 19px; line-height: 1.6; max-width: 640px; margin: 0 auto 14px; }
.th-hero p:last-child { margin-bottom: 0; font-weight: 500; }
.th-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; }
.th-cols .ms-ribbon { margin-top: 12px; }
.th-post { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--ms-line); }
.th-post:last-child { border-bottom: 0; }
.th-post > a { flex: none; }
.th-post img { display: block; width: 150px; height: 104px; object-fit: cover; border-radius: 8px; background: var(--ms-grey); }
.th-post h3 { font: 700 18px/1.35 var(--ms-sans); color: var(--ms-ink); margin: 0 0 6px; }
.th-post p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.th-post a.th-more { font: 500 14px/1 var(--ms-sans); text-decoration: none; }
.th-post a.th-more:hover { text-decoration: underline; }

/* ---------- Product lists (More Great Products for Women / Men) ---------- */
.pl-top { text-align: center; }
.pl-top .pl-intro { font: italic 400 19px/1.55 var(--ms-head); color: var(--ms-muted); margin: 0 auto 18px; }
.pl-title { font: 400 36px/1.2 var(--ms-head); color: var(--ms-berry); text-align: center; margin: 0 0 24px; }
.pl-title em { font-style: italic; }
.pl-list { display: grid; gap: 22px; }
.pl-card { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 30px; align-items: start; padding: 24px 28px; background: #fff; border: 1px solid var(--ms-line); border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.pl-cover { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: flex-start; }
.pl-cover a { display: block; }
.pl-cover img { display: block; max-width: 100%; height: auto; }
.pl-body h2 { font: 700 23px/1.3 var(--ms-head); color: var(--ms-berry); margin: 0 0 12px; }
.pl-body h2 span { display: block; font: 400 17px/1.45 var(--ms-sans); color: var(--ms-ink); margin-top: 4px; }
.pl-body p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.pl-body .pl-by { font: 500 15px/1.4 var(--ms-sans); color: var(--ms-muted); margin: 16px 0 14px; }
.pl-body .ms-btn.pl-more { padding: 12px 24px; font-size: 18px; margin-top: 4px; }
.pl-cover--pair img { width: 200px; }

/* ---------- Phones and tablets ---------- */
@media (max-width: 860px) {
  .st-two { grid-template-columns: 1fr; }
  .st-mc { grid-template-columns: 1fr; gap: 22px; }
  .th-cols { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 760px) {
  .st-intro { grid-template-columns: 1fr; gap: 16px; }
  .st-intro img { width: 320px; max-width: 100%; margin: 0 auto; }
  .st-faq { flex-direction: column; gap: 10px; }
  .st-faq > img { width: 64px; margin-top: 0; }
  .st-lockrow { flex-direction: column; align-items: stretch; text-align: center; }
  .st-lockrow > img { margin: 0 auto; }
  .st-form .ms-btn { justify-self: stretch; width: 100%; }
  .st-actions .ms-btn { flex: 1 1 100%; }
  .pl-title { font-size: 28px; }
  .pl-card { grid-template-columns: 1fr; gap: 16px; padding: 20px 16px; }
  .pl-cover { flex-direction: row; justify-content: center; }
  .pl-cover--pair img { width: 46%; }
  .pl-body .ms-btn.pl-more { width: 100%; }
  .th-post img { width: 112px; height: 80px; }
  .th-hero p { font-size: 17px; }
  .st-help h2, .st-h2 { font-size: 24px; }
}

/* ---------- Small page parts added while restyling the account pages ---------- */
.st-text p { margin: 0 0 14px; }
.st-text .st-sub { font: 700 20px/1.35 var(--ms-sans); color: var(--ms-ink); margin: 0 0 12px; }
.st-side-img { float: right; width: 150px; height: auto; margin: 0 0 14px 24px; border-radius: var(--ms-radius); box-shadow: 0 1px 6px rgba(0,0,0,.18); }
.st-copy-input { display: inline-block; width: auto; max-width: 100%; padding: 8px 10px; font: 400 15px/1.2 var(--ms-sans); border: 1px solid #cfd3d8; border-radius: 6px; background: #fff; color: var(--ms-ink); }
@media (max-width: 760px) { .st-side-img { width: 110px; margin-left: 16px; } }
.ms-main .smallp { margin-top: 16px; font-size: 14px; color: var(--ms-muted); }