/** Shopify CDN: Minification failed

Line 79:0 All "@import" rules must come first

**/
/* ============================================================
   GLOBAL RESET — Eliminate White Stripe Gaps
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: rgba(255, 251, 245, 0.3);
}

#shopify-section-header,
#shopify-section-announcement-bar,
#shopify-section-footer {
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.section-wrapper,
.template-section {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Mobile-specific fix */
@media (max-width: 991px) {

  html,
  body,
  #MainContent {
    width: 100%;
    overflow-x: hidden !important;
    min-width: 100vw;
  }

  .shopify-section {
    width: 100%;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .page-width,
  .container,
  .container-fluid,
  .shopify-section__container {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }
}

/* ============================================================
   HALO & TAIL — "Quiet Luxury" Design System
   SCROLLING GRADIENT: 渐变跟随页面滚动
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;400;500&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&display=swap");

/* ============================================================
   1. GLOBAL CONSTANTS
   ============================================================ */
:root {
  --cashmere: #FFFBF5;
  --gold: #D4AF37;
  --forest: #5E7161;
  --forest-deep: #4B5B4E;
  --radius-24: 24px;
  --shadow-soft: 0 10px 40px rgba(74, 88, 75, 0.05);
  --transition-gentle: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);

  /* Typography — Soft Editorial */
  --font-heading-family: 'Fraunces', serif;
  --font-body-family: 'DM Sans', sans-serif;
  --font-body-weight: 400;
  --font-heading-weight: 400;
}

/* ============================================================
   2. BASE BODY
   ============================================================ */
body {
  margin: 0;
  padding: 0;
  padding-top: 80px;
  font-family: var(--font-body-family) !important;
  color: #3D3D3D;
  line-height: 1.7;
  background-color: var(--cashmere);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* NO OVERLAYS */
body::before,
body::after,
.template-index::before,
.template-index::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   3. SCROLLING GRADIENT — 渐变跟随页面滚动
   上面20%留白，然后自然融入渐变
   ============================================================ */
.template-index {
  /* 渐变应用于整个页面高度，随滚动可见 */
  background: linear-gradient(180deg,
      #FFFBF5 0%,
      /* 顶部：羊毛白 */
      #FFFBF5 20%,
      /* 20% 留白区域 */
      #FFECB3 35%,
      /* 过渡到淡黄色 */
      #FFCC80 50%,
      /* 暖橙色 */
      #DDE5B6 70%,
      /* 淡绿色桥梁 */
      #5E7161 90%,
      /* 森林绿 */
      #5E7161 100%
      /* 底部：与 Footer 融合 */
    ) !important;

  /* 关键：移除 fixed，让渐变随页面滚动 */
  background-attachment: scroll !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;

  min-height: 100vh;
}

/* 所有 section 透明，但排除 Shopify Cookie Banner 相关组件 */
.template-index #MainContent,
.template-index .shopify-section:not([id^="shopify-pc__"]),
.template-index section:not([id^="shopify-pc__"]),
.template-index .section-wrapper,
.template-index main {
  background: transparent !important;
  background-color: transparent !important;
}

/* ============================================================
   3b. PAGE SPECIFIC BACKGROUNDS 
   ============================================================ */
/* DAILY JOY — Sunrise Gradient Background */
.template-daily-joy,
.template-page-daily-joy,
.template-page-boutique {
  background: linear-gradient(to bottom,
    #FFF8DC 0%,      /* Cream */
    #FFF0C4 6%,      /* Very light yellow */
    #FFECB3 12%,     /* Light yellow */
    #FFE4A0 18%,     /* Soft yellow-orange */
    #FFD89B 24%,     /* Soft orange */
    #FFC98A 32%,     /* Medium peach */
    #FFB347 40%,     /* Vibrant sunset */
    #FFA45C 48%,     /* Lighter sunset */
    #FFB88F 56%,     /* Soft peach */
    #FFDCC4 64%,     /* Very light peach */
    #FFEDE0 72%,     /* Nearly white peach */
    #FFF5EE 80%,     /* Even lighter */
    #FFF9F3 88%,     /* Almost white */
    #FFFCF7 94%,     /* Very nearly white */
    #FFFBF5 100%     /* Cashmere for footer */
  ) !important;
  background-attachment: scroll !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
}

/* DIGITAL SOUL — Cyber Gradient Background */
.template-digital-soul,
.template-page-digital-soul {
  background: linear-gradient(to bottom,
    #0F0F23 0%,      /* Dark space */
    #15152E 8%,      /* Slightly lighter */
    #1A1A3E 16%,     /* Deep indigo */
    #2D2A5E 24%,     /* Medium indigo */
    #483D8B 32%,     /* Dark slate blue */
    #5A4CAD 40%,     /* Medium slate */
    #6A5ACD 48%,     /* Slate blue */
    #8B7FE0 56%,     /* Lighter slate */
    #ADA5ED 64%,     /* Soft lavender */
    #CCC7F2 72%,     /* Very soft lavender */
    #E8E5F8 80%,     /* Almost white */
    #F5F3FC 88%,     /* Very light lavender */
    #FAFAFE 94%,     /* Nearly white */
    #0F0F23 100%     /* Deep space for footer */
  ) !important;
  background-attachment: scroll !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
  position: relative;
}

/* THE SANCTUARY — Twilight Gradient Background */
.template-sanctuary,
.template-page-sanctuary,
.template-page-the-sanctuary {
  background: linear-gradient(to bottom,
    #FFF5EE 0%,      /* Seashell */
    #FFEEE9 6%,      /* Very soft pink */
    #FFE4E1 12%,     /* Misty rose */
    #F5DDD5 18%,     /* Soft rose-sand */
    #E6D7C3 26%,     /* Warm sand */
    #DCC9B5 34%,     /* Medium sand */
    #D4B5B0 42%,     /* Dusty rose */
    #C5ACA1 50%,     /* Medium taupe */
    #B8A99A 58%,     /* Taupe */
    #C9BEB3 66%,     /* Light warm gray */
    #DFDAD2 74%,     /* Very soft beige */
    #EDE9E4 82%,     /* Light beige */
    #F7F5F2 88%,     /* Nearly white */
    #FCFBFA 94%,     /* Almost white */
    #5E7161 100%     /* Forest Green for footer */
  ) !important;
  background-attachment: scroll !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  min-height: 100vh;
  position: relative;
}

/* Ensure all sections are transparent on these pages */
.template-daily-joy #MainContent,
.template-daily-joy .shopify-section,
.template-daily-joy section,
.template-daily-joy .section-wrapper,
.template-digital-soul #MainContent,
.template-digital-soul .shopify-section,
.template-digital-soul section:not(.digital-soul-section),
.template-digital-soul .section-wrapper,
.template-sanctuary #MainContent,
.template-sanctuary .shopify-section,
.template-sanctuary section:not(.sanctuary-section),
.template-sanctuary .section-wrapper {
  background: transparent !important;
  background-color: transparent !important;
}

/* Footer background is now managed in footer-group.liquid */

/* ============================================================
   4. TYPOGRAPHY
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.h0,
.h1,
.h2 {
  font-family: var(--font-heading-family) !important;
  font-optical-sizing: auto;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-transform: none !important;
  color: #5E7161;
  margin: 0;
}

body,
p,
a,
li,
input,
button,
.btn {
  font-family: var(--font-body-family) !important;
  letter-spacing: 0;
  color: #5E7161;
}

/* Special "Emotional" Modifier for key phrases */
.text-italic-accent {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  color: #D4AF37;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.25rem); /* 32–52px per SOP */
  line-height: 1.2;
  margin-bottom: 24px;
  font-style: normal;   /* SOP: Hero h1 = upright */
  font-weight: 300;     /* SOP: Hero h1 = weight 300 */
}

h2 {
  font-size: clamp(1.375rem, 2.5vw, 1.75rem); /* 22–28px per SOP */
  font-weight: 400;
}

h3 {
  font-size: clamp(0.9375rem, 2vw, 1.125rem); /* ~15–18px per SOP */
  font-weight: 400; /* SOP: Fraunces only 300 & 400 */
}

/* 首页文字：森林绿 */
.template-index h1,
.template-index h2,
.template-index h3,
.template-index h4 {
  color: #5E7161 !important;
}

.template-index p,
.template-index span,
.template-index li,
.template-index a:not(.btn-primary):not(.floating-cta) {
  color: #4B5B4E !important;
}

/* Override: Header and Footer use their own color systems (CSS variables) */
.template-index .site-header h1,
.template-index .site-header h2,
.template-index .site-header a,
.template-index .site-header span,
.template-index .site-header p,
.template-index .site-header li {
  color: inherit !important;
}

.template-index .ht-footer h2,
.template-index .ht-footer h4,
.template-index .ht-footer a,
.template-index .ht-footer span,
.template-index .ht-footer p,
.template-index .ht-footer li {
  color: inherit !important;
}

/* Override: Sections with their own color schemes */
.template-index .halo-mr__heading {
  color: #D4AF37 !important;
}
.template-index .halo-mr__subheading {
  color: rgba(255, 251, 245, 0.75) !important;
}
.template-index .htas__heading {
  color: #FFFBF5 !important;
}
.template-index .htas__item-title {
  color: #FFFBF5 !important;
}
.template-index .htas__item-index {
  color: rgba(255, 251, 245, 0.5) !important;
}
.template-index .htas__item-content {
  color: rgba(255, 251, 245, 0.82) !important;
}
.template-index .blog-spot__section-heading {
  color: #D4AF37 !important;
}
.template-index .blog-spot__section-sub {
  color: rgba(255, 251, 245, 0.8) !important;
}

/* ============================================================
   Digital Soul 页面专用白色文字 override
   背景为深色星空→紫色渐变，所有深绿色文字需换为白色
   ============================================================ */
.template-digital-soul .bsg__title,
.template-page-digital-soul .bsg__title {
  color: #FFFBF5 !important;
}
.template-digital-soul .bsg__shop-all,
.template-page-digital-soul .bsg__shop-all {
  color: rgba(255, 251, 245, 0.8) !important;
}
.template-digital-soul .bsg__shop-all:hover,
.template-page-digital-soul .bsg__shop-all:hover {
  color: #D4AF37 !important;
}
.template-digital-soul .bsg__name,
.template-page-digital-soul .bsg__name {
  color: #FFFBF5 !important;
}
.template-digital-soul .bsg__price,
.template-page-digital-soul .bsg__price {
  color: rgba(255, 251, 245, 0.65) !important;
}
.template-digital-soul .bsg__price-compare,
.template-page-digital-soul .bsg__price-compare {
  color: rgba(255, 251, 245, 0.4) !important;
}
.template-digital-soul .bsg__scrollbar-track,
.template-page-digital-soul .bsg__scrollbar-track {
  background: rgba(255, 251, 245, 0.15) !important;
}
.template-digital-soul .bsg__scrollbar-thumb,
.template-page-digital-soul .bsg__scrollbar-thumb {
  background: rgba(255, 251, 245, 0.55) !important;
}

/* ============================================================
   5. HEADER — 透明玻璃效果
   ============================================================ */
.header-wrapper {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.01) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.05);
  box-sizing: border-box;
}

.header-logo,
.nav-item a {
  color: #5E7161 !important;
  font-weight: 400; /* SOP: Nav = Fraunces 400 */
}

/* ============================================================
   6. BUTTONS
   ============================================================ */
@keyframes soulful-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.floating-cta,
.btn-primary,
.btn-ritual {
  animation: soulful-float 6s ease-in-out infinite;
  background: var(--forest-deep);
  color: white !important;
  padding: 20px 50px;
  border-radius: var(--radius-24);
  text-decoration: none;
  font-weight: 400; /* SOP: CTA = DM Sans 400 */
  font-size: 0.8125rem; /* ~13px per SOP */
  letter-spacing: 0.04em; /* SOP: CTA letter-spacing */
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover,
.floating-cta:hover {
  background: #E67E50;
  transform: translateY(-4px) scale(1.02);
}

button,
.button {
  border-radius: var(--radius-24) !important;
}

/* ============================================================
   7. GOLDEN RADIUS
   ============================================================ */
.card,
.product-card,
.product-card img,
img.rounded {
  border-radius: var(--radius-24) !important;
}

/* ============================================================
   8. SECTION LAYOUT
   ============================================================ */
.section-wrapper {
  padding: 120px 20px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   9. FOOTER — Styles have been moved to footer-group.liquid
   ============================================================ */

/* ============================================================
   10. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  body {
    padding-top: 70px;
    font-size: 0.9375rem; /* 15px base on mobile */
  }

  .section-wrapper {
    padding: 48px 16px;
  }

  h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem); /* 28–40px mobile */
    font-weight: 300 !important;
    font-style: normal !important;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  h2 {
    font-size: clamp(1.125rem, 4vw, 1.5rem); /* 18–24px mobile */
    font-weight: 400 !important;
  }

  h3 {
    font-size: clamp(0.875rem, 3.5vw, 1rem); /* 14–16px mobile */
    font-weight: 400 !important;
  }

  p {
    font-size: 0.9375rem; /* 15px */
    line-height: 1.7;
  }

  /* Buttons — smaller padding on mobile */
  .floating-cta,
  .btn-primary,
  .btn-ritual {
    padding: 14px 32px;
    font-size: 0.75rem; /* 12px per SOP */
    letter-spacing: 0.04em;
  }

  /* Footer */
  footer.sanctuary-footer {
    padding: 40px 16px 60px;
  }

  .footer-inner {
    gap: 30px !important;
  }

  /* Newsletter form */
  .newsletter-form {
    flex-direction: column;
  }

  .newsletter-input {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  /* Images */
  img {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 480px) {
  body {
    padding-top: 60px;
  }

  .section-wrapper {
    padding: 32px 12px;
  }

  h1 {
    font-size: 1.75rem; /* 28px 小屏 */
    font-weight: 300 !important;
    font-style: normal !important;
  }

  h2 {
    font-size: 1.125rem; /* 18px 小屏 */
    font-weight: 400 !important;
  }

  h3 {
    font-size: 0.9375rem; /* 15px 小屏 */
  }

  /* 产品卡片在小屏的字号微调 */
  .ts-product-carousel__card-title {
    font-size: 0.875rem !important; /* 14px */
  }

  .ts-product-carousel__card-now {
    font-size: 0.75rem !important; /* 12px */
  }

  .ts-product-carousel__card-link {
    font-size: 0.6875rem !important; /* 11px */
  }

  .floating-cta,
  .btn-primary,
  .btn-ritual {
    padding: 12px 24px;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ============================================================
   11. FABLE-STYLE TYPOGRAPHY FORCE OVERRIDES
   ============================================================ */

/* Force Fraunces on heading classes & nav menu items */
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.header__menu-item,
.list-menu__item {
  font-family: 'Fraunces', serif !important;
  font-optical-sizing: auto;
}

/* Nav items: Fraunces 400, 16-18px per SOP */
.header__menu-item,
.list-menu__item,
.header__active-menu-item {
  text-transform: none !important;
  font-weight: 400 !important;   /* SOP: Nav = 400 (was 500) */
  font-size: 1.05rem !important; /* ~16.8px ≈ 16-18px SOP */
  letter-spacing: 0em !important;
}

/* Banner / hero headings */
h1,
.banner__heading {
  font-weight: 300 !important;   /* SOP: Hero h1 = 300 */
  font-style: normal !important; /* SOP: Hero h1 = upright */
  text-transform: none !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

h2,
h3 {
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}

/* ============================================================
   12. TYPOGRAPHY TOKEN RULES — per SOP v1.0
   ============================================================ */

/* Product card title: Fraunces italic 400 15px */
.ts-product-carousel__card-title,
.product-card__title,
.card__heading,
.card__heading a {
  font-family: 'Fraunces', serif !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: 0.9375rem !important; /* 15px */
  letter-spacing: 0.01em !important;
}

/* Price: DM Sans 300 13px color:secondary (降调) */
.ts-product-carousel__card-now,
.ts-product-carousel__card-price,
.price__regular,
.price,
.product-price {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 300 !important; /* SOP: price = 300, never bold */
  font-size: 0.8125rem !important; /* 13px */
  color: #7A8C7D !important; /* secondary,降调 */
}

/* CTA link text (not filled button): DM Sans 400 12-13px 0.04em */
.ts-product-carousel__card-link,
.card__cta,
.card__cta a {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  font-size: 0.75rem !important; /* 12px */
  letter-spacing: 0.04em !important;
}

/* Body paragraphs: DM Sans 400 15-16px line-height 1.7 */
p {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.7;
  font-weight: 400;
}

/* Body: clean sans-serif contrast */
body,
p,
.rte {
  font-family: 'DM Sans', sans-serif !important;
}