/** Shopify CDN: Minification failed

Line 14:2 Unexpected "/"

**/
/*
 * mio-page-shared.css
 * Shared CSS for custom page components: wrapper, keyframes, section labels,
 * FAQ, and fade-in animations.
 *
 * Font note: Shopify loads fonts via theme settings. For reference, these
 * components use 'Cormorant Garamond' (serif) and 'Inter' (sans-serif).
 * /* @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Inter:wght@300;400;500&display=swap'); */
 */

/* ============================================================
   WRAPPER
   ============================================================ */
.mio-page *, .mio-page *::before, .mio-page *::after { box-sizing: border-box; }
.mio-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--mio-page-cream);
  color: var(--mio-page-text-dark);
  line-height: 1.6;
  overflow-x: clip;
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes mioPageFadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SECTION LABELS
   ============================================================ */
.mio-page-section-label {
  font-size: 0.72em; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mio-page-text-light); margin-bottom: 20px; display: block;
}
.mio-page-section-title {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 400; line-height: 1.25; color: var(--mio-page-text-dark);
  max-width: 700px; margin: 0 auto;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.mio-page-faq-section { padding: 100px 48px; max-width: 900px; margin: 0 auto; }
.mio-page-faq-list { display: flex; flex-direction: column; }
.mio-page-faq-category {
  font-size: 0.72em; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--mio-page-text-light); padding: 32px 0 16px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.mio-page-faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); }
.mio-page-faq-question {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 20px 0; background: none; border: none; cursor: pointer;
  font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; font-weight: 400;
  color: var(--mio-page-text-dark); text-align: left;
}
.mio-page-faq-question svg {
  flex-shrink: 0; transition: transform 0.3s ease; stroke: var(--mio-page-text-light);
}
.mio-page-faq-item.open .mio-page-faq-question svg { transform: rotate(180deg); }
.mio-page-faq-answer {
  max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
}
.mio-page-faq-item.open .mio-page-faq-answer { max-height: 600px; }
.mio-page-faq-answer-inner {
  padding: 0 0 24px; font-size: 0.92em; line-height: 1.8;
  color: var(--mio-page-text-body); font-weight: 300;
}

/* ============================================================
   FADE-IN UTILITY
   ============================================================ */
.mio-fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.mio-fade-in.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   RESPONSIVE — 768px
   ============================================================ */
@media (max-width: 768px) {
  .mio-page-faq-section { padding: 60px 24px; }
}