/** Shopify CDN: Minification failed

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

**/
/* ═══ TimelessAI Brand Unification CSS ═══
   Aligns mytimeless.ai with the App's DESIGN.md color system.
   Canvas #F5F2EC, Brand Gold #C9A84C, Ink #282926, Surface #FEFCF8
*/

/* ── Background: pure white → warm white ── */
:root {
  --COLOR-BG: #F5F2EC !important;
  --COLOR-BG-SECONDARY: #FEFCF8 !important;
}
body,
.template-index,
.template-product,
.template-collection,
.template-page {
  background-color: #F5F2EC !important;
}

/* ── CTA Buttons: black → Brand Gold ── */
.btn:not(.btn--neutral):not(.btn--text):not(.btn--white),
.shopify-payment-button .shopify-payment-button__button--unbranded,
.spr-summary-actions-newreview,
button[type="submit"].btn {
  background-color: #C9A84C !important;
  border-color: #C9A84C !important;
  color: #fff !important;
}
.btn:not(.btn--neutral):not(.btn--text):not(.btn--white):hover {
  background-color: #b8973f !important;
  border-color: #b8973f !important;
}

/* ── Secondary buttons: gold outline ── */
.btn--neutral,
.btn--secondary {
  border-color: #C9A84C !important;
  color: #C9A84C !important;
}
.btn--neutral:hover,
.btn--secondary:hover {
  background-color: #C9A84C !important;
  color: #fff !important;
}

/* ── Navigation hover: gold underline ── */
.header__desktop__upper .nav__link:hover,
.header__desktop__upper .nav__link--active {
  border-bottom-color: #C9A84C !important;
}

/* ── Product cards: surface bg + subtle shadow ── */
.product-grid-item,
.grid-product,
.product-card {
  background: #FEFCF8;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.product-grid-item:hover,
.grid-product:hover,
.product-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* ── Price color: gold ── */
.product__price,
.product-grid-item .price,
.grid-product .price,
.money {
  color: #C9A84C !important;
}

/* ── Text colors: ink hierarchy ── */
body, .rte { color: #282926; }
.rte h1, .rte h2, .rte h3,
h1, h2, h3 { color: #282926; }
.rte p, .type-body { color: #635C51; }

/* ── Footer: keep dark, add gold accents ── */
.site-footer .footer__title,
.site-footer h4 {
  color: #C9A84C !important;
}
.site-footer a:hover {
  color: #C9A84C !important;
}

/* ── Announcement bar: Hero Deep + gold text ── */
.announcement-bar,
.section-marquee {
  background-color: #1A2A3A !important;
}
.announcement-bar__text,
.announcement-bar a,
.section-marquee__text {
  color: #C9A84C !important;
}


/* ═══ TimelessAI Typography System ═══
   Web equivalents of DESIGN.md iOS fonts:
   New York → Playfair Display (already loaded by theme)
   SF Pro Text → Inter / system sans-serif
   SF Pro Rounded → Inter (rounded features not available, use weight instead)
   SF Mono → ui-monospace system stack

   Type Scale from DESIGN.md:
   Display:     Playfair Display  38px Bold      -0.3px  1.1
   Section:     Playfair Display  28px Semibold   0      1.2
   Subsection:  Playfair Display  22px Semibold   0      1.25
   Body:        Inter/system      15px Medium      0      1.5
   Interactive: Inter/system      15px Semibold    0      1.3
   Eyebrow:     monospace         11px Semibold   0.8px  1.4 uppercase
   Data:        Inter/system      18px Semibold   tabular-nums 1.3
*/

/* ── Font Import: Inter (SF Pro Text web equivalent) ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Base Font Override ── */
:root {
  --font-heading: 'Playfair Display', 'New York', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --font-interactive: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

body,
.type-body,
.rte,
p,
li,
td {
  font-family: var(--font-body) !important;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Display / Hero (New York → Playfair Display) ── */
h1,
.h1,
.hero__title,
.main-heading,
.featured-video__heading {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.1 !important;
}

/* ── Section Headings ── */
h2,
.h2,
.section__title,
.collection__title {
  font-family: var(--font-heading) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  color: #282926;
}

/* ── Subsection Headings ── */
h3,
.h3 {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #282926;
}

/* ── Body Text (SF Pro Text → Inter) ── */
.rte p,
.product__description p,
.page__content p {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  color: #635C51;
}

/* ── Interactive / Buttons (SF Pro Rounded → Inter Semibold) ── */
.btn,
button,
[type="submit"],
.nav__link,
.announcement-bar a,
.shopify-payment-button__button {
  font-family: var(--font-interactive) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

/* ── Navigation Links ── */
.nav__link,
.header__desktop .nav__link {
  font-family: var(--font-interactive) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
}

/* ── Price / Data (SF Pro Rounded → Inter tabular-nums) ── */
.money,
.price,
.product__price,
.product-grid-item .price,
.grid-product .price {
  font-family: var(--font-interactive) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  font-feature-settings: 'tnum' on, 'lnum' on !important;
  font-variant-numeric: tabular-nums !important;
  color: #C9A84C !important;
}

/* ── Eyebrow / Monospace Labels ── */
.timelessai-trust-badge span,
.timelessai-journey-preview__title,
.announcement-bar__text,
.section-marquee__text {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  line-height: 1.4 !important;
}

/* ── Product Title (Display style) ── */
.product__title,
.product-grid-item .product__title,
.grid-product__title {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
}

/* ── Card Titles ── */
.product-grid-item__title,
.grid-product__title,
.collection__title a {
  font-family: var(--font-heading) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #282926 !important;
}

/* ── Footer ── */
.site-footer {
  font-family: var(--font-body) !important;
}
.site-footer .footer__title,
.site-footer h4 {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
}

/* ── Testimonials ── */
.testimonial__text,
.testimonials-with-images__text {
  font-family: var(--font-body) !important;
  font-style: italic;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* ── Form Inputs ── */
input,
textarea,
select {
  font-family: var(--font-body) !important;
  font-size: 15px !important;
}

/* ── Cleanup: remove Palo Alto theme font overrides ── */
.type-heading,
[class*="heading"] {
  font-family: var(--font-heading) !important;
}


/* ── Hide HubSpot chat widget on product pages (mobile) ── */
@media (max-width: 768px) {
  .template-product #hubspot-messages-iframe-container,
  .template-product .hs-chat-widget,
  .template-product [id*="hubspot-messages"] {
    display: none !important;
  }
}

/* ── Sticky CTA: ensure it doesn't overlap with browser nav ── */
@media (max-width: 768px) {
  .timelessai-sticky-cta {
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.06) !important;
  }
}

/* ── Trust Bar: not sticky, stays in flow ── */
.timelessai-trust-bar {
  position: static !important;
}

/* ── Rewards button (Smile.io): give breathing room on mobile ── */
@media (max-width: 768px) {
  .template-product #smile-ui-container,
  .template-product [class*="smile-launcher"] {
    bottom: 70px !important;
  }
}


/* ═══ Promotion / Announcement Bar Fix ═══
   The mid-page promo bar was dark blue/green and unreadable.
   Align with brand: warm surface bg + gold text.
*/

/* Top scrolling marquee */
.section-marquee,
.announcement-bar {
  background-color: #1A2A3A !important;
}
.section-marquee__text,
.announcement-bar__text,
.announcement-bar a {
  color: #C9A84C !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

/* Mid-page promotion banner (between product content and footer nav) */
.footer__promo,
.site-footer-promo,
[class*="promo-bar"],
.template-product .shopify-section:has(.announcement-bar),
.shopify-section-group-group-footer .announcement-bar,
.shopify-section-group-group-footer .section-marquee {
  background-color: #FEFCF8 !important;
  border-top: 1px solid #E6DED1 !important;
  border-bottom: 1px solid #E6DED1 !important;
}
.shopify-section-group-group-footer .announcement-bar__text,
.shopify-section-group-group-footer .section-marquee__text,
.shopify-section-group-group-footer .section-marquee__text a {
  color: #C9A84C !important;
}

/* Footer promo / second announcement bar — warm style */
.site-footer + .shopify-section .announcement-bar,
.site-footer + .shopify-section .section-marquee,
.footer-group .announcement-bar,
.footer-group .section-marquee,
#shopify-section-group-footer .section-marquee,
#shopify-section-group-footer .announcement-bar {
  background-color: #FEFCF8 !important;
}
#shopify-section-group-footer .section-marquee__text,
#shopify-section-group-footer .announcement-bar__text {
  color: #C9A84C !important;
}

/* Generic fix: any dark promo strip in product/page templates */
.template-product .section-marquee:not(:first-child),
.template-page .section-marquee:not(:first-child),
.template-collection .section-marquee:not(:first-child) {
  background: linear-gradient(135deg, #F5F2EC, #FEFCF8) !important;
  border-top: 1px solid #E6DED1 !important;
  border-bottom: 1px solid #E6DED1 !important;
}
.template-product .section-marquee:not(:first-child) .section-marquee__text,
.template-page .section-marquee:not(:first-child) .section-marquee__text,
.template-collection .section-marquee:not(:first-child) .section-marquee__text {
  color: #C9A84C !important;
  font-weight: 700 !important;
}


/* ═══ Static Announcement Bar Fix ═══
   The static promo bar ("10% Discount...") inherits dark bg from parent.
   Give it its own warm background to match brand.
*/

/* The static announcement block (not the scrolling marquee) */
.announcement-bar-static .announcement,
.announcement--top-border,
.announcement--bottom-border,
.announcement__block,
.announcement__slider {
  background-color: #F5F2EC !important;
}

.announcement-bar-static .announcement__text,
.announcement-bar-static .announcement__message,
.announcement__block--text .announcement__text {
  color: #C9A84C !important;
  font-weight: 600 !important;
}

/* The parent section background — override the dark blue */
.announcement-bar-static {
  background-color: #F5F2EC !important;
}

/* Keep the scrolling marquee dark (first child) */
.announcement-bar-static .section-marquee {
  background-color: #1A2A3A !important;
}
.announcement-bar-static .section-marquee .section-marquee__text {
  color: #C9A84C !important;
}