/** Shopify CDN: Minification failed

Line 186:10 Expected identifier but found whitespace
Line 186:17 Unexpected "!"

**/
/* ================================================
   AURABIŌM BLOG STYLES
   Shopify Dawn Theme Compatible
   Version: 2.1 | February 2026
   
   FIXED: Converted rem → px to bypass Dawn's 62.5% base font-size
   
   HOW TO INSTALL:
   1. Online Store → Themes → ⋯ → Edit Code →
      Assets → Add new asset → aurabiom-blog.css → 
      paste this entire file
   2. In Layout → theme.liquid, before </head> add:
      {{ 'aurabiom-blog.css' | asset_url | stylesheet_tag }}
   
   DO NOT use Theme Settings → Custom CSS
   (1500 char limit, content property blocked)
================================================ */


/* === BRAND COLORS === */
:root {
  --ab-dark-blue: #001F7E;
  --ab-charcoal: #444444;
  --ab-cool-gray: #6B7280;
  --ab-cold-stone: #E5E8ED;
  --ab-cool-stone: #F0F1F4;
  --ab-white: #FFFFFF;
}


/* ================================================
   EYEBROW / CATEGORY TAG
   Usage: <div class="ab-eyebrow">Science • Topic</div>
================================================ */
.ab-eyebrow {
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ab-dark-blue) !important;
  margin-bottom: 16px !important;
}


/* ================================================
   TL;DR / KEY TAKEAWAY BOX
   Usage:
   <div class="ab-tldr">
     <div class="ab-tldr-label">Key Takeaway</div>
     <div class="ab-tldr-content">Text with <strong>bold stat</strong></div>
   </div>
================================================ */
.ab-tldr {
  background: var(--ab-cool-stone) !important;
  border-radius: 4px !important;
  padding: 24px 28px !important;
  margin: 24px 0 32px !important;
}
.ab-tldr-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ab-dark-blue) !important;
  margin-bottom: 8px !important;
}
.ab-tldr-content {
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 165% !important;
  color: var(--ab-charcoal) !important;
}
.ab-tldr-content strong {
  color: var(--ab-dark-blue) !important;
  font-weight: 500 !important;
}


/* ================================================
   STAT / DATA CARD
   Usage:
   <div class="ab-stat">
     <div class="ab-stat-row">
       <div class="ab-stat-number">274%</div>
       <div class="ab-stat-body">
         <div class="ab-stat-label">Description</div>
         <div class="ab-stat-source">Source info</div>
       </div>
     </div>
   </div>
================================================ */
.ab-stat {
  background: var(--ab-cold-stone) !important;
  border-radius: 4px !important;
  padding: 24px 28px !important;
  margin: 28px 0 !important;
}
.ab-stat-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 20px !important;
}
.ab-stat-number {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 40px !important;
  font-weight: 300 !important;
  letter-spacing: -0.008em !important;
  line-height: 1 !important;
  color: var(--ab-dark-blue) !important;
  flex-shrink: 0 !important;
}
.ab-stat-body {
  flex: 1 !important;
  padding-top: 4px !important;
}
.ab-stat-label {
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--ab-charcoal) !important;
  line-height: 145% !important;
  margin-bottom: 6px !important;
}
.ab-stat-source {
  font-family: 'Azeret Mono', 'SF Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: -0.03em !important;
  color: var(--ab-cool-gray) !important;
}


/* ================================================
   EXPERT QUOTE / BLOCKQUOTE
   Usage:
   <blockquote class="ab-quote">
     <p>Quote text here.</p>
     <div class="ab-quote-attribution">
       <strong>Dr. Name, PhD</strong>
       Title, Institution
     </div>
   </blockquote>
================================================ */
.ab-quote {
  margin: 32px 0 !important;
  padding: 24px 24px 24px 28px !important;
  background: var(--ab-cool-stone) !important;
  border-left: 3px solid var(--ab-dark-blue) !important;
  border-radius: 0 4px 4px 0 !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
}
blockquote.ab-quote {
  display: flex !important;
  flex-direction: column !important;
}
.ab-quote p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-size: 19px !important;
  line-height: 150% !important;
  letter-spacing: -0.01em !important;
  color: #444444 !important;
  margin-bottom: 14px !important;
  font-style: normal !important;
  display: block !important;
  width: 100% !important;
  flex: none !important;
}
.ab-quote-attribution {
  font-size: 13px !important;
  color: var(--ab-cool-gray) !important;
  line-height: 145% !important;
  display: block !important;
  width: 100% !important;
  flex: none !important;
}
  display: block !important;
  width: 100% !important;
}
.ab-quote-attribution strong {
  display: block !important;
  color: var(--ab-charcoal) !important;
  font-weight: 500 !important;
}


/* ================================================
   COMPARISON TABLE
   Usage:
   <div class="ab-table-wrap">
     <table class="ab-table">
       <thead><tr>
         <th>Factor</th><th>Standard</th>
         <th class="ab-highlight">Aurabiōm</th>
       </tr></thead>
       <tbody><tr>
         <td><strong>Row label</strong></td>
         <td>Value</td>
         <td class="ab-highlight">Better value</td>
       </tr></tbody>
     </table>
   </div>
================================================ */
.ab-table-wrap {
  overflow-x: auto !important;
  margin: 28px 0 !important;
  border-radius: 4px !important;
  border: 1px solid var(--ab-cold-stone) !important;
}
.ab-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
}
.ab-table th {
  padding: 14px 16px !important;
  text-align: left !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ab-charcoal) !important;
  background: var(--ab-cool-stone) !important;
  border-bottom: 1px solid var(--ab-cold-stone) !important;
}
.ab-table td {
  font-weight: 300 !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--ab-cold-stone) !important;
  color: var(--ab-charcoal) !important;
}
.ab-table tr:last-child td {
  border-bottom: none !important;
}
.ab-table td strong {
  font-weight: 500 !important;
}
.ab-table .ab-mono {
  font-family: 'Azeret Mono', monospace !important;
  font-size: 13px !important;
  letter-spacing: -0.03em !important;
}
.ab-highlight {
  background: rgba(0, 31, 126, 0.025) !important;
}


/* ================================================
   BENEFITS LIST
   Usage:
   <ul class="ab-benefits">
     <li><strong>Benefit:</strong> Description.</li>
   </ul>
================================================ */
.ab-benefits {
  list-style: none !important;
  margin: 24px 0 !important;
  padding: 0 !important;
}
.ab-benefits li {
  position: relative !important;
  padding: 14px 0 14px 20px !important;
  border-bottom: 1px solid var(--ab-cold-stone) !important;
  font-weight: 300 !important;
}
.ab-benefits li:last-child {
  border-bottom: none !important;
}
.ab-benefits li::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 19px !important;
  width: 5px !important;
  height: 5px !important;
  background: var(--ab-dark-blue) !important;
  border-radius: 50% !important;
}
.ab-benefits li strong {
  font-weight: 500 !important;
  color: var(--ab-charcoal) !important;
}


/* ================================================
   FAQ SECTION
   Usage:
   <div class="ab-faq">
     <h3 class="ab-faq-title">Frequently Asked Questions</h3>
     <div class="ab-faq-item">
       <div class="ab-faq-q">Question?</div>
       <div class="ab-faq-a">Answer.</div>
     </div>
   </div>
================================================ */
.ab-faq {
  background: var(--ab-cool-stone) !important;
  border-radius: 4px !important;
  padding: 28px 32px !important;
  margin: 44px 0 !important;
}
.ab-faq-title {
  font-family: 'Tenor Sans', Georgia, serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--ab-cold-stone) !important;
}
.ab-faq-item {
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--ab-cold-stone) !important;
}
.ab-faq-item:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.ab-faq-q {
  font-weight: 500 !important;
  color: var(--ab-charcoal) !important;
  margin-bottom: 8px !important;
  font-size: 15px !important;
  line-height: 140% !important;
}
.ab-faq-a {
  font-weight: 300 !important;
  color: var(--ab-cool-gray) !important;
  font-size: 14px !important;
  line-height: 165% !important;
}


/* ================================================
   AUTHOR BIO
   Usage:
   <div class="ab-author">
     <div class="ab-author-avatar">V</div>
     <div class="ab-author-body">
       <h4>Veronica Chen</h4>
       <div class="ab-author-role">Founder & Formulator, Aurabiōm</div>
       <div class="ab-author-text">Bio text <a href="#">@handle</a></div>
     </div>
   </div>
================================================ */
.ab-author {
  display: flex !important;
  gap: 20px !important;
  padding: 24px !important;
  background: var(--ab-cool-stone) !important;
  border-radius: 4px !important;
  margin: 44px 0 !important;
}
.ab-author-avatar {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 50% !important;
  background: var(--ab-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Tenor Sans', Georgia, serif !important;
  font-size: 22px !important;
  color: var(--ab-charcoal) !important;
}
.ab-author-body h4 {
  font-family: 'Tenor Sans', Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 2px !important;
}
.ab-author-role {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ab-dark-blue) !important;
  margin-bottom: 8px !important;
}
.ab-author-text {
  font-size: 13px !important;
  font-weight: 300 !important;
  color: var(--ab-cool-gray) !important;
  line-height: 160% !important;
}
.ab-author-text a {
  color: var(--ab-dark-blue) !important;
  text-decoration: none !important;
}
.ab-author-text a:hover {
  text-decoration: underline !important;
}


/* ================================================
   SOURCES / REFERENCES
   Usage:
   <div class="ab-sources">
     <h4 class="ab-sources-title">Sources & References</h4>
     <div class="ab-sources-list">
       1. Author. "Title." <em>Journal</em>, 2024.<br>
       2. Author. "Title." <em>Journal</em>, 2023.
     </div>
   </div>
================================================ */
.ab-sources {
  padding-top: 28px !important;
  border-top: 1px solid var(--ab-cold-stone) !important;
  margin-top: 40px !important;
}
.ab-sources-title {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--ab-cool-gray) !important;
  margin-bottom: 12px !important;
}
.ab-sources-list {
  font-family: 'Azeret Mono', 'SF Mono', monospace !important;
  font-size: 12px !important;
  letter-spacing: -0.03em !important;
  color: var(--ab-cool-gray) !important;
  line-height: 200% !important;
}
.ab-sources-list a {
  color: var(--ab-dark-blue) !important;
  text-decoration: none !important;
}
.ab-sources-list a:hover {
  text-decoration: underline !important;
}


/* ================================================
   KEY TAKEAWAY (DARK BOX)
   Usage:
   <div class="ab-key">
     <div class="ab-key-label">Key Takeaway</div>
     <div class="ab-key-content">Important conclusion.</div>
   </div>
================================================ */
.ab-key {
  background: var(--ab-dark-blue) !important;
  color: white !important;
  padding: 20px 24px !important;
  border-radius: 4px !important;
  margin: 28px 0 !important;
}
.ab-key-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.7) !important;
  margin-bottom: 8px !important;
}
.ab-key-content {
  font-size: 15px !important;
  line-height: 160% !important;
  color: white !important;
}


/* ================================================
   MOBILE RESPONSIVE
================================================ */
@media (max-width: 768px) {
  .ab-stat-row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  .ab-stat-number {
    font-size: 36px !important;
  }
  .ab-author {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .ab-table {
    font-size: 12px !important;
  }
  .ab-table th,
  .ab-table td {
    padding: 10px 8px !important;
  }
  .ab-table th {
    font-size: 9px !important;
  }
  .ab-tldr,
  .ab-stat,
  .ab-faq {
    padding: 18px 16px !important;
  }
  .ab-quote {
    padding: 18px 16px 18px 20px !important;
  }
  .ab-quote p {
    font-size: 17px !important;
  }
  .ab-faq-title {
    font-size: 19px !important;
  }
  .ab-faq-q {
    font-size: 14px !important;
  }
  .ab-faq-a {
    font-size: 13px !important;
  }
}