/* ============================================================================
 * mm-pages.css — Miss Merylin custom page-template components.
 *
 * Loaded as a SEPARATE stylesheet (handle "missmerylin-pages", enqueued after
 * "missmerylin-child-style") to keep these additions out of the frequently
 * regenerated style.css. Relies on the brand tokens (--mm-*) defined in
 * style.css :root, which load first.
 *
 * Contents:
 *   1. Returns & Exchanges additions  (page-returns-policy.php, .mm-policy-*)
 *   2. About Us                       (page-about-us.php, .mm-about-*)
 * ==========================================================================*/


/* ── 1 · Returns & Exchanges additions (page-returns-policy.php) ─────────────
   Scoped under .mm-policy-* so they live inside the shared policy system: a
   prominent "Start a Return" CTA above the sections, a return-eligibility
   checklist, and the Non-Returnable Items styled exclusion list. */

/* Prominent "Start a Return" CTA — boxed, blush ground, sits above the sections */
.mm-policy-action { margin: 0 0 clamp(34px,6vw,48px); padding: clamp(24px,5vw,32px); background: var(--mm-blush); border: .5px solid var(--mm-border); display: flex; flex-direction: column; gap: 18px; }
.mm-policy-action__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(22px,6vw,28px); line-height: 1.15; letter-spacing: -.01em; color: var(--mm-black); margin: 0 0 8px; }
.mm-policy-action__sub { font-family: var(--mm-font-body); font-weight: 300; font-size: 14px; line-height: 1.65; color: var(--mm-gray); margin: 0; }
.mm-policy-action__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; background: var(--mm-black); color: #fff; font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .2s ease; }
.mm-policy-action__btn:hover { background: var(--mm-accent); color: #fff; }
.mm-policy-action__ic { display: inline-flex; line-height: 0; color: #fff; }

/* Return-eligibility checklist — ✓ rows read positive (green), ✗ row reads as exclusion */
.mm-policy-checklist { margin: 0 0 clamp(34px,6vw,48px); }
.mm-policy-checklist__title { font-family: var(--mm-font-body); font-size: 9px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 16px; }
.mm-policy-checklist__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.mm-policy-checklist__item { display: flex; align-items: center; gap: 12px; font-family: var(--mm-font-body); font-weight: 300; font-size: 15px; line-height: 1.45; color: var(--mm-black); }
.mm-policy-checklist__mark { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.mm-policy-checklist__item--ok .mm-policy-checklist__mark { background: rgba(46,125,90,.12); color: #2e7d5a; }
.mm-policy-checklist__item--no .mm-policy-checklist__mark { background: rgba(200,85,106,.12); color: var(--mm-accent); }
.mm-policy-checklist__item--no .mm-policy-checklist__label { color: var(--mm-gray); }

/* Non-Returnable Items — styled exclusion list (inside its .mm-policy-section) */
.mm-policy-section__lead { font-family: var(--mm-font-body); font-weight: 300; font-size: 15px; line-height: 1.75; color: var(--mm-black); margin: 0 0 16px; }
.mm-policy-exclusions { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 9px 10px; }
.mm-policy-exclusions__item { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; background: rgba(200,85,106,.06); border: .5px solid rgba(200,85,106,.24); font-family: var(--mm-font-body); font-size: 13px; font-weight: 400; color: var(--mm-black); }
.mm-policy-exclusions__mark { color: var(--mm-accent); font-size: 11px; line-height: 1; }
.mm-policy-section__note { font-family: var(--mm-font-body); font-weight: 300; font-style: italic; font-size: 13px; line-height: 1.6; color: var(--mm-gray); margin: 0; }


/* ── 2 · About Us — flagship editorial (page-about-us.php) ───────────────────
   Full-bleed hero, curation pillars, promise chips, story timeline, Merylin
   Basics callout, style-tech + community bands, closing CTA. Off-white ground,
   Cormorant display headlines, hairline rules, generous whitespace. Mobile-first. */
.mm-about-page { background: var(--mm-offwhite); color: var(--mm-black); }
.mm-about-wrap { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }

/* 1 · Hero — full-bleed editorial */
.mm-about-hero { padding: clamp(72px,16vw,160px) 0 clamp(48px,9vw,96px); background: var(--mm-offwhite); }
.mm-about-hero__inner { max-width: 920px; margin: 0 auto; padding: 0 clamp(20px,5vw,32px); }
.mm-about-hero__kicker { font-family: var(--mm-font-body); font-size: 10px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--mm-accent); margin: 0 0 22px; }
.mm-about-hero__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(42px,11vw,86px); line-height: 1.02; letter-spacing: -.02em; color: var(--mm-black); margin: 0 0 28px; max-width: 12ch; }
.mm-about-hero__lede { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(18px,4.5vw,26px); line-height: 1.45; color: var(--mm-gray); margin: 0; max-width: 40ch; }

/* Section scaffold */
.mm-about-section { padding: clamp(48px,9vw,96px) 0; }
.mm-about-section--band { background: var(--mm-blush); }
.mm-about-section__kicker { font-family: var(--mm-font-body); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-accent); margin: 0 0 16px; }
.mm-about-section__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(28px,7vw,46px); line-height: 1.08; letter-spacing: -.01em; color: var(--mm-black); margin: 0 0 22px; }
.mm-about-section__body { font-family: var(--mm-font-body); font-weight: 300; font-size: clamp(15px,2.2vw,17px); line-height: 1.75; color: var(--mm-black); margin: 0; max-width: 60ch; }

/* 2 · Story prose */
.mm-about-prose p { font-family: var(--mm-font-body); font-weight: 300; font-size: clamp(15px,2.2vw,17px); line-height: 1.8; color: var(--mm-black); margin: 0 0 18px; max-width: 60ch; }
.mm-about-prose p:last-child { margin-bottom: 0; }

/* 3 · Curation pillars */
.mm-about-pillars { margin-top: clamp(36px,6vw,52px); display: grid; gap: clamp(20px,3vw,28px); }
.mm-about-pillar { background: var(--mm-white); border: .5px solid var(--mm-border); padding: clamp(26px,5vw,36px); }
.mm-about-pillar__icon { display: block; font-size: 32px; line-height: 1; margin: 0 0 18px; }
.mm-about-pillar__title { font-family: var(--mm-font-heading); font-weight: 400; font-size: clamp(20px,4vw,24px); line-height: 1.15; color: var(--mm-black); margin: 0 0 10px; }
.mm-about-pillar__desc { font-family: var(--mm-font-body); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--mm-gray); margin: 0; }

/* 4 · Promise chips */
.mm-about-chips { list-style: none; margin: clamp(28px,5vw,40px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.mm-about-chip { font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-black); background: var(--mm-white); border: .5px solid var(--mm-border); padding: 12px 20px; border-radius: 999px; }
.mm-about-chip::before { content: "—"; color: var(--mm-accent); margin-right: 8px; }

/* 5 · Timeline */
.mm-about-timeline { list-style: none; margin: clamp(36px,6vw,52px) 0 0; padding: 0 0 0 4px; }
.mm-about-timeline__item { position: relative; padding: 0 0 clamp(28px,5vw,40px) clamp(28px,5vw,36px); border-left: .5px solid var(--mm-border); }
.mm-about-timeline__item:last-child { padding-bottom: 0; border-left-color: transparent; }
.mm-about-timeline__dot { position: absolute; left: -5px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--mm-accent); }
.mm-about-timeline__phase { font-family: var(--mm-font-body); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--mm-muted); margin: 0 0 10px; }
.mm-about-timeline__text { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(18px,3.4vw,22px); line-height: 1.5; color: var(--mm-black); margin: 0; max-width: 48ch; }

/* 6 · Merylin Basics callout */
.mm-about-basics { background: var(--mm-black); color: var(--mm-white); padding: clamp(34px,7vw,56px); }
.mm-about-basics__tag { font-family: var(--mm-font-body); font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--mm-accent); margin: 0 0 16px; }
.mm-about-basics__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(30px,7vw,48px); line-height: 1.05; color: var(--mm-white); margin: 0 0 16px; }
.mm-about-basics__body { font-family: var(--mm-font-body); font-weight: 300; font-size: clamp(15px,2.2vw,17px); line-height: 1.75; color: rgba(255,255,255,.78); margin: 0 0 26px; max-width: 50ch; }
.mm-about-basics__link { font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-white); text-decoration: none; border-bottom: 1px solid var(--mm-accent); padding-bottom: 4px; transition: color .2s ease; }
.mm-about-basics__link:hover { color: var(--mm-accent); }

/* 8 · Community — Instagram placeholder */
.mm-about-ig { margin: clamp(28px,5vw,40px) 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px,1.5vw,12px); }
.mm-about-ig__cell { display: block; aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--mm-blush), var(--mm-border)); }
.mm-about-ig__follow { font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-black); text-decoration: none; border-bottom: 1px solid var(--mm-accent); padding-bottom: 4px; transition: color .2s ease; }
.mm-about-ig__follow:hover { color: var(--mm-accent); }

/* 9 · Closing CTA */
.mm-about-cta { background: var(--mm-black); color: var(--mm-white); padding: clamp(64px,12vw,120px) clamp(20px,5vw,32px); text-align: center; }
.mm-about-cta__inner { max-width: 720px; margin: 0 auto; }
.mm-about-cta__title { font-family: var(--mm-font-heading); font-weight: 300; font-size: clamp(30px,7vw,52px); line-height: 1.08; letter-spacing: -.01em; color: var(--mm-white); margin: 0 0 clamp(28px,5vw,40px); }
.mm-about-cta__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin: 0 0 clamp(28px,5vw,36px); }
.mm-about-cta__btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 34px; background: var(--mm-white); color: var(--mm-black); font-family: var(--mm-font-body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: background-color .2s ease, color .2s ease; }
.mm-about-cta__btn:hover { background: var(--mm-accent); color: var(--mm-white); }
.mm-about-cta__btn--ghost { background: transparent; color: var(--mm-white); border: 1px solid rgba(255,255,255,.4); }
.mm-about-cta__btn--ghost:hover { background: var(--mm-white); color: var(--mm-black); border-color: var(--mm-white); }
.mm-about-cta__contact { font-family: var(--mm-font-body); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.6); margin: 0; }
.mm-about-cta__contact-link { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.mm-about-cta__contact-link:hover { color: var(--mm-accent); }

/* Desktop: pillars 3-across */
@media (min-width: 768px) {
	.mm-about-pillars { grid-template-columns: repeat(3, 1fr); }
}