/** Shopify CDN: Minification failed

Line 1517:2 Unexpected "}"

**/
/* Self-hosted Hanken Grotesk (latin, variable 400-800). No Google Fonts request. */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(molsg-hanken.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url(molsg-hanken-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}












.mo-listicle {
  

  
  --mo-paper: #F6F4EE;        
  --mo-white: #ffffff;        
  --mo-haze: #e4ebdf;         
  --mo-ink: #20271c;          
  --mo-border: #e3ded1;       
  --mo-border-strong: #767468;
  --mo-text-2: #646458;       
  --mo-warmgray: #8d8c7f;     

  
  --mo-forest: #2d4c26;       
  --mo-living-green: #4e7d3f; 
  --mo-spring-accent: #6fac57;
  --mo-eucalyptus: #6b8d73;   
  --mo-sage: #a5b99c;         
  --mo-mint: #c2d1c1;         
  --mo-mint-50: #e9efe6;      

  
  --mo-rust: #80412b;         
  --mo-clay: #a66f4a;         
  --mo-sand: #d2b9a6;         
  --mo-bone: #dfd7cc;         

  
  --mo-orange-bright: #F4842B;  
  --mo-orange-brand: #E2722E;   
  --mo-orange-deep: #B85727;    
  --mo-orange-tint: #fbe9d8;    
  --mo-orange-floor: #9A4720;   

  

  
  --color-bg: var(--mo-paper);
  --color-surface: var(--mo-white);
  --color-surface-soft: var(--mo-mint-50);             
  --color-surface-lift: var(--mo-haze);                

  
  --color-text: var(--mo-ink);
  --color-text-muted: var(--mo-warmgray);              
  --color-text-2: var(--mo-text-2);                    
  --color-text-muted-accessible: var(--mo-text-2);     

  
  --color-border: var(--mo-border);                    
  --color-border-strong: var(--mo-border-strong);      

  
  --color-brand: var(--mo-forest);
  --color-brand-2: var(--mo-living-green);             
  --color-brand-tint: var(--mo-sage);
  --color-brand-tint-soft: var(--mo-mint);

  
  --color-success: var(--mo-living-green);             
  --color-focus-ring: var(--mo-forest);                

  
  --color-accent: var(--mo-orange-brand);
  --color-on-light: var(--mo-orange-deep);             
  --color-on-dark: var(--mo-orange-bright);            
  --color-accent-strong: var(--mo-orange-deep);        
  --color-on-accent: var(--mo-ink);                    

  
  --color-ingredient-bg: var(--mo-bone);
  --color-ingredient-text: var(--mo-rust);             
  --color-badge-new-bg: var(--mo-orange-tint);
  --color-badge-new-text: var(--mo-rust);              

  
  --color-label-text: var(--mo-forest);                
  --color-eyebrow-index: var(--mo-rust);               

  
  --gradient-action: linear-gradient(135deg, #B85727, #9A4720); 
  
  --gradient-action-bright: linear-gradient(135deg, #F4842B, #B85727); 
  --gradient-action-floor: var(--mo-orange-deep);
}






.mo-listicle {
  
  --font-wordmark: 'Bodoni Moda', Georgia, serif;   
  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;

  
  --text-hero: 56px;
  --text-h1: 40px;
  --text-h2: 30px;
  --text-body: 17px;
  --text-body-min: 15px;     
  --text-label: 13px;

  
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;   

  
  --tracking-label: .16em;
  --tracking-wordmark: .06em;

  
  --leading-body: 1.5;
  --leading-tight: 1.08;
}




.mo-listicle {
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 72px;   
}




.mo-listicle {
  --radius-sm: 10px;      
  --radius-md: 22px;
  --radius-card: 24px;    
  --radius-input: 14px;   
  --radius-pill: 999px;   
}




.mo-listicle {
  --shadow-card: 0 14px 30px rgba(45, 76, 38, .16);     
  --shadow-lg: 0 24px 60px rgba(45, 76, 38, .12);       
  --shadow-action: 0 12px 26px rgba(184, 87, 39, .32);  
}




.mo-listicle {
  --container: 1200px;   
}




.mo-listicle {
  
  --dur-instant: 120ms;    
  --dur-fast:    240ms;    
  --dur-base:    480ms;    
  --dur-slow:    760ms;    
  --dur-slower: 1100ms;    

  
  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);     
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);     
  --ease-organic: cubic-bezier(0.40, 0, 0.10, 1);     
  --ease-spring:  cubic-bezier(0.34, 1.42, 0.50, 1);  
  --ease-snap:    cubic-bezier(0.22, 1, 0.36, 1);     

  
  --move-xs: 12px;   
  --move-sm: 28px;    
  --move-md: 56px;   
  --move-lg: 96px;    

  
  --stagger:    90ms;    
  --stagger-sm: 55ms;    
  --stagger-lg: 140ms;   

  
  --blur-reveal: 14px;   
}








.mo-listicle *, .mo-listicle *::before, .mo-listicle *::after { box-sizing: border-box; }

.mo-listicle { -webkit-text-size-adjust: 100%; }

.mo-listicle {
  margin: 0;
  background: var(--color-bg);                 
  color: var(--color-text);                    
  font-family: var(--font-sans);               
  font-size: var(--text-body);                 
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);            
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}


.mo-listicle p { font-size: var(--text-body); line-height: var(--leading-body); margin: 0 0 var(--space-3); }
.mo-listicle p:last-child { margin-bottom: 0; }

.mo-listicle a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }

.mo-listicle a:hover { color: var(--color-brand); text-decoration-thickness: 2px; }

.mo-listicle img, .mo-listicle svg { max-width: 100%; display: block; }

.mo-listicle :where(button, .mo-listicle input, .mo-listicle select, .mo-listicle textarea) { font: inherit; color: inherit; }

.mo-listicle ::selection { background: var(--color-brand-tint-soft); color: var(--color-brand); }



.mo-listicle .mo-container {
  width: 100%;
  max-width: var(--container);                 
  margin-inline: auto;
  padding-inline: var(--space-3);              
}

.mo-listicle .mo-section { padding-block: var(--space-7); } 


.mo-listicle .mo-section--forest {
  background: var(--color-brand);
  color: var(--color-bg);                      
}
.mo-listicle .mo-section--soft { background: var(--color-surface-soft); }   


.mo-listicle .mo-section--lift {
  background: var(--color-surface-lift);       
  border-top: 2px solid var(--color-brand);
}


.mo-listicle .mo-section--spring {
  background: var(--mo-living-green);
  color: var(--mo-white);                      
}


.mo-listicle .mo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-4);
}

.mo-listicle .mo-col-1 { grid-column: span 1;  }
.mo-listicle .mo-col-2 { grid-column: span 2;  }
.mo-listicle .mo-col-3 { grid-column: span 3;  }
.mo-listicle .mo-col-4 { grid-column: span 4;  }
.mo-listicle .mo-col-5 { grid-column: span 5;  }
.mo-listicle .mo-col-6 { grid-column: span 6;  }
.mo-listicle .mo-col-7 { grid-column: span 7;  }
.mo-listicle .mo-col-8 { grid-column: span 8;  }
.mo-listicle .mo-col-9 { grid-column: span 9;  }
.mo-listicle .mo-col-10 { grid-column: span 10; }
.mo-listicle .mo-col-11 { grid-column: span 11; }
.mo-listicle .mo-col-12 { grid-column: span 12; }


.mo-listicle .mo-stack > * + * { margin-top: var(--space-4); }
.mo-listicle .mo-stack-sm > * + * { margin-top: var(--space-2); }
.mo-listicle .mo-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mo-listicle .mo-row--between { justify-content: space-between; }
.mo-listicle .mo-center { text-align: center; }
.mo-listicle .mo-measure { max-width: 60ch; }                



.mo-listicle .mo-wordmark {
  font-family: var(--font-wordmark);           
  font-weight: var(--weight-bold);
  font-size: var(--text-h2);
  line-height: 1;
  letter-spacing: var(--tracking-wordmark);    
  text-transform: uppercase;
  color: var(--color-text);                    
  text-decoration: none;
  display: inline-block;
}
.mo-listicle .mo-wordmark .on { color: var(--color-on-light); }  


.mo-listicle .mo-wordmark--dark { color: var(--color-bg); }       
.mo-listicle .mo-wordmark--dark .on { color: var(--color-on-dark); } 


.mo-listicle .mo-wordmark--lg { font-size: var(--text-h1); }
.mo-listicle .mo-wordmark--xl { font-size: var(--text-hero); }



.mo-listicle .mo-eyebrow {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-label);                
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);       
  text-transform: uppercase;
  color: var(--color-label-text);              
}

.mo-listicle .mo-eyebrow__index {
  color: var(--color-eyebrow-index);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.mo-listicle .mo-section-header { margin-bottom: var(--space-5); }
.mo-listicle .mo-section-header > .mo-eyebrow { margin-bottom: var(--space-2); }



.mo-listicle .mo-hero {
  font-family: var(--font-sans);
  font-size: var(--text-hero);                 
  font-weight: var(--weight-extrabold);        
  line-height: var(--leading-tight);           
  letter-spacing: -0.01em;
  color: var(--color-brand);
  margin: 0;
}
.mo-listicle .mo-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1);                   
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  color: var(--color-brand);
  margin: 0;
}
.mo-listicle .mo-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2);                   
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-brand);
  margin: 0;
}
.mo-listicle .mo-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);                 
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);            
  color: var(--color-text);
  margin: 0;
}
.mo-listicle .mo-body--muted { color: var(--color-text-2); }  
.mo-listicle .mo-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);                
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);       
  text-transform: uppercase;
  color: var(--color-label-text);              
  margin: 0;
}


.mo-listicle .mo-section--forest .mo-hero, .mo-listicle .mo-section--forest .mo-h1, .mo-listicle .mo-section--forest .mo-h2, .mo-listicle .mo-section--forest .mo-body { color: var(--color-bg); }


.mo-listicle .mo-section--spring .mo-hero, .mo-listicle .mo-section--spring .mo-h1, .mo-listicle .mo-section--spring .mo-h2, .mo-listicle .mo-section--spring .mo-body { color: var(--mo-white); }



.mo-listicle .mo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 56px;
  padding: 0 var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-body-min);             
  font-weight: var(--weight-bold);             
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);           
  cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease,
              color .2s ease, border-color .2s ease, filter .2s ease;
}
.mo-listicle .mo-btn:focus-visible {
  outline: none;
  
  box-shadow: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus-ring);
}
.mo-listicle .mo-btn:disabled, .mo-listicle .mo-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }


.mo-listicle .mo-btn--primary {
  background: var(--gradient-action);          
  color: var(--color-surface);                 
  box-shadow: var(--shadow-action);
}
.mo-listicle .mo-btn--primary:hover { transform: translateY(-1px); filter: brightness(1.04); }
.mo-listicle .mo-btn--primary:active { transform: translateY(0); filter: brightness(.97); }


.mo-listicle .mo-btn--secondary {
  background: var(--color-brand);
  color: var(--color-bg);                      
}

.mo-listicle .mo-btn--secondary:hover { background: var(--color-brand); filter: brightness(0.92); }
.mo-listicle .mo-btn--secondary:active { transform: translateY(1px); }


.mo-listicle .mo-btn--tertiary {
  background: transparent;
  color: var(--color-brand);
  border-color: var(--color-brand-2);          
}
.mo-listicle .mo-btn--tertiary:hover { background: var(--color-surface-soft); }


.mo-listicle .mo-btn--block { width: 100%; }
.mo-listicle .mo-btn--lg { min-height: 64px; padding-inline: var(--space-5); font-size: var(--text-body); }



.mo-listicle .mo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);           
  box-shadow: var(--shadow-card);              
  padding: var(--space-4);
}
.mo-listicle .mo-card--soft {
  background: var(--color-surface-soft);       
  box-shadow: none;
}

.mo-listicle .mo-card--feature {
  border: 2px solid var(--color-brand);
  box-shadow: var(--shadow-lg);
}
.mo-listicle .mo-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-brand);
  margin: 0 0 var(--space-2);
}
.mo-listicle .mo-card__body { color: var(--color-text-2); margin: 0; }



.mo-listicle .mo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-label);                
  font-weight: var(--weight-semibold);         
  line-height: 1.2;
  letter-spacing: .02em;
  border-radius: var(--radius-pill);           
  border: 0 solid transparent;
  white-space: nowrap;
}


.mo-listicle .mo-badge--popular {
  background: var(--color-brand);
  color: var(--color-bg);
}

.mo-listicle .mo-badge--save {
  background: var(--color-accent);
  color: var(--color-on-accent);               
}

.mo-listicle .mo-badge--subscribe {
  background: var(--color-surface-soft);
  color: var(--color-brand);
}

.mo-listicle .mo-badge--ingredient {
  background: var(--color-ingredient-bg);
  color: var(--color-ingredient-text);         
}

.mo-listicle .mo-badge--patented {
  background: var(--color-surface);
  color: var(--color-brand);
  border: 2px solid var(--color-brand-2);
}

.mo-listicle .mo-badge--new {
  background: var(--color-badge-new-bg);
  color: var(--color-badge-new-text);
}



.mo-listicle .mo-input {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-body-min);             
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong); 
  border-radius: var(--radius-input);          
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.mo-listicle .mo-input::placeholder { color: var(--color-text-muted-accessible); opacity: 1; }
.mo-listicle .mo-input:focus, .mo-listicle .mo-input:focus-visible {
  outline: none;
  
  border-color: var(--color-focus-ring);
  box-shadow: 0 0 0 2px var(--color-focus-ring);
}
.mo-listicle .mo-input:disabled { background: var(--color-surface-soft); cursor: not-allowed; opacity: .7; }

.mo-listicle textarea.mo-input { min-height: 120px; resize: vertical; }

.mo-listicle .mo-field { display: block; }
.mo-listicle .mo-field > .mo-label { display: block; margin-bottom: var(--space-1); }


.mo-listicle .mo-select {
  padding-right: var(--space-5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232d4c26' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}



.mo-listicle .mo-section--forest :focus-visible, .mo-listicle .mo-section--spring :focus-visible {
  box-shadow: 0 0 0 3px var(--color-brand), 0 0 0 5px var(--color-bg);
}


.mo-listicle .mo-swatch {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);             
  overflow: hidden;
  background: var(--color-surface);
}
.mo-listicle .mo-swatch__chip { height: 72px; }
.mo-listicle .mo-swatch__meta {
  padding: var(--space-2);
  font-size: var(--text-label);
  color: var(--color-text-2);
}
.mo-listicle .mo-swatch__name {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  letter-spacing: .01em;
}
.mo-listicle .mo-swatch__hex {
  display: block;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--color-text-muted);
}


.mo-listicle .mo-chip--paper { background: var(--mo-paper); }
.mo-listicle .mo-chip--white { background: var(--mo-white); }
.mo-listicle .mo-chip--ink { background: var(--mo-ink); }
.mo-listicle .mo-chip--forest { background: var(--mo-forest); }
.mo-listicle .mo-chip--eucalyptus { background: var(--mo-eucalyptus); }
.mo-listicle .mo-chip--sage { background: var(--mo-sage); }
.mo-listicle .mo-chip--mint { background: var(--mo-mint); }
.mo-listicle .mo-chip--mint-50 { background: var(--mo-mint-50); }
.mo-listicle .mo-chip--haze { background: var(--mo-haze); }
.mo-listicle .mo-chip--living-green { background: var(--mo-living-green); }
.mo-listicle .mo-chip--spring-accent { background: var(--mo-spring-accent); }
.mo-listicle .mo-chip--border-strong { background: var(--mo-border-strong); }
.mo-listicle .mo-chip--rust { background: var(--mo-rust); }
.mo-listicle .mo-chip--clay { background: var(--mo-clay); }
.mo-listicle .mo-chip--sand { background: var(--mo-sand); }
.mo-listicle .mo-chip--bone { background: var(--mo-bone); }
.mo-listicle .mo-chip--orange { background: var(--mo-orange-brand); }
.mo-listicle .mo-chip--orange-deep { background: var(--mo-orange-deep); }
.mo-listicle .mo-chip--gradient { background: var(--gradient-action); }



@media (max-width: 900px) {
  .mo-listicle .mo-grid { grid-template-columns: repeat(6, 1fr); }
  .mo-listicle .mo-col-7, .mo-listicle .mo-col-8, .mo-listicle .mo-col-9, .mo-listicle .mo-col-10, .mo-listicle .mo-col-11, .mo-listicle .mo-col-12 { grid-column: span 6; }
}
@media (max-width: 600px) {
  .mo-listicle .mo-grid { grid-template-columns: 1fr; }
  .mo-listicle .mo-grid > [class*="mo-col-"] { grid-column: 1 / -1; }
  .mo-listicle .mo-hero { font-size: var(--text-h1); }
  .mo-listicle .mo-h1 { font-size: var(--text-h2); }
  .mo-listicle .mo-section { padding-block: var(--space-5); }
}






.mo-listicle { --color-bg: #ffffff; }
.mo-listicle, .mo-listicle { background: #ffffff; }
.mo-listicle { scroll-behavior: smooth; }
.mo-listicle img, .mo-listicle video, .mo-listicle svg, .mo-listicle canvas { max-width: 100%; }
.mo-listicle img, .mo-listicle video { height: auto; }
.mo-listicle .mo-section--lift { border-top: none; border-bottom: none; }


@keyframes moMarqueeL    { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes moMarqueePros { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }

.mo-listicle [data-marquee-track="pros"]:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .mo-listicle [data-marquee-track] { animation: none !important; }
  .mo-listicle { scroll-behavior: auto; }
}


.mo-listicle .mo-reason {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "head media" "body media";
  column-gap: var(--space-6);
  align-content: center;
}
.mo-listicle .mo-reason > .r-head { grid-area: head;  align-self: end; }
.mo-listicle .mo-reason > .r-media { grid-area: media; align-self: center; }
.mo-listicle .mo-reason > .r-body { grid-area: body;  align-self: start; }
.mo-listicle .mo-reason--rev { grid-template-areas: "media head" "media body"; }
.mo-listicle .mo-reason--top > .r-media { align-self: center; margin-top: 0; }

.mo-listicle .r-head { display: flex; align-items: flex-start; gap: var(--space-2); }
.mo-listicle .r-index {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(44px, 5vw, 62px);
  line-height: .9;
  color: var(--color-eyebrow-index);
  flex: none;
}
.mo-listicle .r-title { text-wrap: pretty; padding-top: 4px; font-size: clamp(32px, 3vw, 36px); line-height: 1.14; }


.mo-listicle .mo-standalone { display: flex; flex-direction: column; gap: var(--space-3); }
.mo-listicle .mo-standalone .s-head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mo-listicle .mo-standalone .s-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand-2);
  text-align: center;
}
.mo-listicle .mo-standalone .s-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); align-items: center; }

@media (max-width: 900px) {
  .mo-listicle .mo-standalone .s-grid { grid-template-columns: 1fr; row-gap: var(--space-2); }
  .mo-listicle .mo-hero-media { order: -1; }
  .mo-listicle .mo-reason, .mo-listicle .mo-reason--rev { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body"; column-gap: 0; row-gap: var(--space-2); }
  .mo-listicle .mo-reason > .r-media { margin-top: 10px; }
}
@media (max-width: 600px) {
  .mo-listicle .mo-hide-sm { display: none; }

  
  .mo-listicle .mo-review-pill { display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 4px 8px !important; }
  .mo-listicle .mo-review-pill > div:first-child { grid-column: 1; grid-row: 1; }
  .mo-listicle .mo-review-pill > div:last-child { display: contents !important; }
  .mo-listicle .mo-review-pill img { width: 22px !important; height: 22px !important; border-width: 1.5px !important; }
  .mo-listicle .mo-review-pill img + img { margin-left: -7px !important; }
  
  .mo-listicle .mo-review-pill svg { grid-column: 2; grid-row: 1; justify-self: start; }
  .mo-listicle .mo-review-pill span[style*="nowrap"] {
    grid-column: 1 / -1; grid-row: 2;
    white-space: normal !important;
    font-size: 12.5px !important; line-height: 1.3 !important;
  }

  
  .mo-listicle .mo-awardchip {
    font-size: 11px !important; padding: 6px 10px !important; gap: 6px !important;
    white-space: nowrap; letter-spacing: -0.005em;
  }
  .mo-listicle .mo-awardchip svg { width: 13px !important; height: 13px !important; }
}


@media (max-width: 600px) {
  .mo-listicle-type-scale {  }
  .mo-listicle h1 { font-size: 29px !important; line-height: 1.14 !important; }
  .mo-listicle .mo-h1 { font-size: 26px !important; }
  .mo-listicle .mo-h2 { font-size: 24px !important; line-height: 1.2 !important; }
  .mo-listicle .r-title { font-size: 24px !important; line-height: 1.2 !important; }
  .mo-listicle .r-index { font-size: 36px !important; }
  .mo-listicle .mo-body { font-size: 16px !important; }
  .mo-listicle .mo-stat { font-size: 15px !important; }
  .mo-listicle .mo-stat--sm { font-size: 14px !important; }
  .mo-listicle .mo-tl-day { font-size: 17px !important; }
  .mo-listicle .mo-whyrow-title { font-size: 17px !important; }
  .mo-listicle .mo-whyrow p { font-size: 15px !important; }
  .mo-listicle .mo-vcard-title { font-size: 16px !important; }
  .mo-listicle .mo-vcard p { font-size: 15px !important; }
  .mo-listicle .mo-checkpill { font-size: 13px !important; padding: 6px 11px !important; gap: 6px !important; }
  .mo-listicle .mo-checkpill::before { width: 4px; height: 4px; }
  .mo-listicle .mo-pillgrid { gap: 6px !important; }
  .mo-listicle .mo-trustchip { font-size: 13.5px !important; gap: 6px !important; }
  .mo-listicle .mo-acc--faq .mo-acc-btn { font-size: 16px !important; }
  .mo-listicle .mo-acc--offer .mo-acc-btn { font-size: 15px !important; }
  .mo-listicle .mo-acc-panel p { font-size: 15px !important; }
}


.mo-listicle .mo-grid > [class*="mo-col-"] { min-width: 0; }


.mo-listicle .mo-review-pill svg { width: 96px !important; height: 17px !important; }


.mo-listicle .mo-herotrack { display: flex; transition: transform .65s cubic-bezier(.22,.9,.24,1); }
.mo-listicle .mo-herotrack > img { width: 100%; flex: none; aspect-ratio: 1/1; object-fit: cover; }
.mo-listicle .mo-herodot {
  width: 10px; height: 10px; border-radius: 999px; border: none; cursor: pointer; padding: 0;
  background: rgba(246,244,238,.38); transition: background .3s ease;
}
.mo-listicle .mo-herodot.is-active { background: var(--color-bg); }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-herotrack { transition: none; } }


.mo-listicle .mo-vwall {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  max-width: 1120px; margin: 0 auto; height: 620px; overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
}

.mo-listicle .mo-vwall { pointer-events: none; }
.mo-listicle .mo-vcol { height: 100%; overflow: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.mo-listicle .mo-vcol::-webkit-scrollbar { display: none; }
.mo-listicle .mo-vtrack { display: flex; flex-direction: column; gap: 14px; padding: 0 8px 14px; }
.mo-listicle .mo-vcol--2, .mo-listicle .mo-vcol--3 { display: none; }
@media (min-width: 760px)  { .mo-listicle .mo-vwall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mo-listicle .mo-vcol--2 { display: block; } }
@media (min-width: 1040px) { .mo-listicle .mo-vwall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mo-listicle .mo-vcol--3 { display: block; } }
@media (max-width: 560px)  { .mo-listicle .mo-vwall { height: 540px; } }

.mo-listicle .mo-vcard {
  width: 100%; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: 0 4px 14px rgba(45,76,38,.06);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.mo-listicle .mo-vcard-title { font-family: var(--font-sans); font-weight: 800; font-size: 18px; line-height: 1.25; color: var(--color-brand); }
.mo-listicle .mo-vcard p { font-size: 16px; line-height: 1.55; margin: 0; }
.mo-listicle .mo-vwho { font-family: var(--font-sans); font-size: 14px; color: var(--color-text-2); padding-top: 14px; border-top: 1px solid var(--color-border); }
.mo-listicle .mo-vwho b { color: var(--color-brand-2); font-weight: 700; }


/* ============================================================================
   Founder trust block — sits directly after the offer, where "who am I buying
   from" gets asked. Portrait carries the certificate; the clip of the day it
   was awarded is inset over it, because the pairing is the proof.
   ============================================================================ */
.mo-listicle .mo-founder { padding-block: var(--space-7); background: var(--color-surface-soft); }
/* start-aligned, not centred: the byline sits directly above the portrait, and
   centring the shorter media column would drop a gap between the two. */
.mo-listicle .mo-founder-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5); align-items: start;
}
.mo-listicle .mo-founder-media { position: relative; max-width: 460px; width: 100%; margin-inline: auto; }
.mo-listicle .mo-founder-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%;
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg); background: var(--color-surface);
}
.mo-listicle .mo-founder-clip {
  position: absolute; right: -10px; bottom: -22px; width: 38%; max-width: 168px; margin: 0;
  border-radius: var(--radius-md); overflow: hidden; background: var(--color-brand);
  box-shadow: 0 18px 40px rgba(45, 76, 38, .28); border: 4px solid var(--color-surface-soft);
}
.mo-listicle .mo-founder-clip video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; background: var(--color-brand); }
.mo-listicle .mo-founder-clip figcaption {
  padding: 7px 10px 9px; text-align: center; color: var(--mo-mint);
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
}
.mo-listicle .mo-founder-copy { display: flex; flex-direction: column; gap: var(--space-2); }
.mo-listicle .mo-founder-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--text-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-label-text);
}
.mo-listicle .mo-founder-title { margin: 0; text-wrap: balance; }
.mo-listicle .mo-founder-points { margin: var(--space-1) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.mo-listicle .mo-founder-points li {
  position: relative; padding-left: 30px; font-family: var(--font-sans);
  font-size: 15.5px; line-height: 1.45; color: var(--color-text);
}
.mo-listicle .mo-founder-points li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 999px;
  background: var(--color-brand-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6.5'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
/* Compact byline, sitting under the certification line it belongs to. No rule
   above or below: it is part of that paragraph's thought, not a sign-off. */
.mo-listicle .mo-founder-sign {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 0; padding: 0; border: 0;
}
.mo-listicle .mo-founder-sign img { width: 38px; height: 38px; flex: none; border-radius: 999px; object-fit: cover; object-position: 50% 16%; background: var(--color-surface); }
.mo-listicle .mo-founder-sign span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.mo-listicle .mo-founder-sign b { font-family: var(--font-sans); font-weight: 700; font-size: 14.5px; line-height: 1.2; color: var(--color-text); }
.mo-listicle .mo-founder-sign em { font-family: var(--font-sans); font-style: normal; font-size: 12.5px; line-height: 1.25; color: var(--color-text-2); }

@media (min-width: 900px) {
  .mo-listicle .mo-founder-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); }
  .mo-listicle .mo-founder-media { margin-inline: 0; }
  .mo-listicle .mo-founder-clip { right: -34px; bottom: -30px; }
}

/* ============================================================================
   Marquee walls — the doctor row and the customer-video row. Both hold one
   authored group that the JS clones, so -50% lands exactly on the seam. Speed
   comes from the card count, so adding a card keeps the pace.
   ============================================================================ */

/* --- customer video wall (reason 07) --------------------------------------- */
.mo-listicle .mo-reason--wall { grid-template-columns: 1fr; grid-template-areas: "head" "body"; max-width: 68ch; }

.mo-listicle .mo-ugcwall {
  margin-top: var(--space-5); overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mo-listicle .mo-ugcwall-track { display: flex; width: max-content; }
.mo-listicle .mo-ugcwall.is-rolling .mo-ugcwall-track {
  animation: moMarqueeWall 60s linear infinite;
  will-change: transform; backface-visibility: hidden;
}
.mo-listicle .mo-ugcwall.is-rolling:hover .mo-ugcwall-track,
.mo-listicle .mo-ugcwall.is-rolling:focus-within .mo-ugcwall-track { animation-play-state: paused; }
.mo-listicle .mo-ugcwall-group { display: flex; align-items: stretch; gap: var(--space-3); padding-right: var(--space-3); flex: none; }

.mo-listicle .mo-ugccard {
  width: clamp(186px, 21vw, 268px); flex: none; margin: 0; display: flex; flex-direction: column;
  background: var(--color-surface); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); overflow: hidden;
}
/* the clips are 720x1280, so the frame is 9:16 and nothing gets cropped */
.mo-listicle .mo-ugcstage { position: relative; }
.mo-listicle .mo-ugcvid {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block;
  background: var(--color-surface-soft);
}
/* The card clip is silent. This button is the only way to hear it, so it covers
   the whole frame and says what it does rather than relying on a bare icon. */
.mo-listicle .mo-ugcplay {
  position: absolute; inset: 0; width: 100%; cursor: pointer; border: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 10px; padding-bottom: 16px; color: #fff;
  background: linear-gradient(180deg, rgba(32,39,28,0) 45%, rgba(32,39,28,.55) 100%);
  transition: background var(--dur-fast) ease;
}
.mo-listicle .mo-ugcplay:hover { background: linear-gradient(180deg, rgba(32,39,28,.12) 30%, rgba(32,39,28,.68) 100%); }
.mo-listicle .mo-ugcplay-icon {
  width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); color: var(--color-brand);
  box-shadow: 0 6px 18px rgba(32,39,28,.35);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.mo-listicle .mo-ugcplay:hover .mo-ugcplay-icon { transform: scale(1.08); }
.mo-listicle .mo-ugcplay-label {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(32,39,28,.5);
}

/* --- story lightbox: the one player on the page that has sound ------------- */
.mo-listicle .mo-ugcmodal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: var(--space-3); }
.mo-listicle .mo-ugcmodal[hidden] { display: none; }
.mo-listicle .mo-ugcmodal-scrim { position: absolute; inset: 0; background: rgba(32,39,28,.72); backdrop-filter: blur(3px); }
.mo-listicle .mo-ugcmodal-panel {
  position: relative; display: grid; grid-template-columns: 1fr; gap: 0;
  width: min(920px, 100%); max-height: min(88vh, 900px); overflow: auto;
  background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
.mo-listicle .mo-ugcmodal-vid { width: 100%; max-height: 62vh; aspect-ratio: 9/16; object-fit: contain; background: #10140e; display: block; }
.mo-listicle .mo-ugcmodal-copy { padding: var(--space-3) var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 10px; }
.mo-listicle .mo-ugcmodal-name { font-family: var(--font-sans); font-weight: 700; font-size: 20px; color: var(--color-brand); }
.mo-listicle .mo-ugcmodal-body p { font-size: 15px; line-height: 1.55; margin: 0 0 10px; color: var(--color-text); }
.mo-listicle .mo-ugcmodal-body .mo-ugcstory-q {
  font-weight: 600; font-size: 16.5px; line-height: 1.45; color: var(--color-brand);
  padding-left: 14px; border-left: 3px solid var(--color-brand-tint);
}
.mo-listicle .mo-ugcmodal-body .mo-ugcstory-ul { margin: 0 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.mo-listicle .mo-ugcmodal-body .mo-ugcstory-ul li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.45; color: var(--color-text); }
.mo-listicle .mo-ugcmodal-body .mo-ugcstory-ul li::before { content: "✨"; position: absolute; left: 0; top: 0; font-size: 13px; }
.mo-listicle .mo-ugcmodal-close {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px;
  display: grid; place-items: center; cursor: pointer; border: none; border-radius: 999px;
  background: rgba(255,255,255,.92); color: var(--color-brand); box-shadow: 0 6px 18px rgba(32,39,28,.3);
}
.mo-listicle .mo-ugcmodal-close:hover { background: #fff; }
/* side by side once there is room: clip left, story right */
@media (min-width: 860px) {
  .mo-listicle .mo-ugcmodal-panel { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .mo-listicle .mo-ugcmodal-vid { max-height: none; height: 100%; }
  .mo-listicle .mo-ugcmodal-copy { padding: var(--space-4); justify-content: center; }
}
.mo-listicle .mo-ugcmeta {
  flex: 1; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 7px;
  background: var(--color-brand); text-align: center;
}
.mo-listicle .mo-ugcname {
  font-family: var(--font-sans); font-weight: 700; font-size: 15.5px; line-height: 1.25; color: var(--color-bg);
}
.mo-listicle .mo-ugcquote {
  margin: 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45;
  color: var(--mo-mint); text-wrap: pretty;
}
@media (max-width: 699px) {
  .mo-listicle .mo-ugcname { font-size: 14.5px; }
  .mo-listicle .mo-ugcquote { font-size: 12px; }
  .mo-listicle .mo-ugcmeta { padding: 12px 12px 16px; }
}

/* --- doctor wall ----------------------------------------------------------- */
.mo-listicle .mo-drwall {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mo-listicle .mo-drwall-track { display: flex; width: max-content; }
.mo-listicle .mo-drwall.is-rolling .mo-drwall-track {
  animation: moMarqueeWall 60s linear infinite;
  will-change: transform; backface-visibility: hidden;
}
/* let people stop on a face they want to read */
.mo-listicle .mo-drwall.is-rolling:hover .mo-drwall-track,
.mo-listicle .mo-drwall.is-rolling:focus-within .mo-drwall-track { animation-play-state: paused; }
.mo-listicle .mo-drwall-group { display: flex; align-items: stretch; gap: var(--space-3); padding-right: var(--space-3); flex: none; }

.mo-listicle .mo-drwcard {
  /* wide enough for four clauses of credentials without a ladder of two-word lines */
  width: clamp(224px, 26vw, 300px); flex: none; margin: 0; display: flex; flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.mo-listicle .mo-drwphoto { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--color-surface-soft); }
/* Forest panel under the portrait, in three fixed tiers: name, role, then the
   career points one per line. A single run-on credential set centred and italic
   was what made twelve cards of different lengths look untidy — a left-aligned
   list gives every card the same left edge and the same rhythm. */
.mo-listicle .mo-drwmeta {
  flex: 1; padding: 16px 16px 20px; display: flex; flex-direction: column;
  background: var(--color-brand);
}
.mo-listicle .mo-drwname {
  font-family: var(--font-sans); font-weight: 700; font-size: 17px; line-height: 1.25;
  color: var(--color-bg); text-align: center;
}
/* Two lines are reserved whether the role needs them or not: without it a
   one-line role pulls its divider up and the bullet lists stop lining up
   across the row, which is exactly what read as untidy. */
.mo-listicle .mo-drwrole {
  margin-top: 5px; padding-bottom: 12px; text-align: center;
  display: flex; align-items: center; justify-content: center;
  min-height: calc(2 * 1.35em + 12px);
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.35;
  color: var(--mo-sage);
  border-bottom: 1px solid rgba(194, 209, 193, .22);
}
.mo-listicle .mo-drwlist {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 7px;
}
.mo-listicle .mo-drwlist li {
  position: relative; padding-left: 13px; text-align: left;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.4;
  color: var(--mo-mint); text-wrap: pretty;
}
.mo-listicle .mo-drwlist li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 4px; height: 4px; border-radius: 999px; background: var(--mo-spring-accent);
}
/* legacy single-line credential, kept so a card can still be written that way */
.mo-listicle .mo-drwcred {
  margin-top: 10px; font-family: var(--font-sans); font-size: 13px; line-height: 1.5;
  color: var(--mo-mint); text-align: center;
}
@media (max-width: 699px) {
  .mo-listicle .mo-drwname { font-size: 15.5px; }
  .mo-listicle .mo-drwlist li { font-size: 12px; }
  .mo-listicle .mo-drwmeta { padding: 14px 12px 18px; }
}
@keyframes moMarqueeWall { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mo-listicle .mo-drcard {
  width: 100%; max-width: 560px; margin-top: var(--space-3); display: grid; grid-template-columns: 1fr;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(45,76,38,.08); overflow: hidden;
}
.mo-listicle .mo-drphoto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 26%; background: var(--color-surface-soft); }
.mo-listicle .mo-drquote { padding: var(--space-3) var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 900px) {
  .mo-listicle .mo-drcard { max-width: 1080px; grid-template-columns: 1fr; align-items: center; background: transparent; border: none; box-shadow: none; overflow: visible; }
  .mo-listicle .mo-drphoto { grid-column: 1; grid-row: 1; width: 62%; margin-left: auto; aspect-ratio: 4 / 3; object-position: 50% 18%; border-radius: var(--radius-card); box-shadow: 0 18px 42px rgba(45,76,38,.12); }
  .mo-listicle .mo-drquote { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; width: 54%; z-index: 1; background: #F4F6F1; border-radius: var(--radius-card); box-shadow: 0 16px 38px rgba(45,76,38,.12); padding: var(--space-4); justify-content: center; gap: 18px; }
}


.mo-listicle .mo-stat {
  margin: var(--space-3) 0 0; padding: 15px 20px; border-radius: var(--radius-input);
  background: #F1EDE2; font-family: var(--font-sans); font-style: italic; font-weight: 500;
  font-size: 17px; line-height: 1.5; color: var(--color-text); text-wrap: pretty;
}
@media (min-width: 900px) { .mo-listicle .mo-stat { padding: 18px 24px; font-size: 18.5px; } }
.mo-listicle .mo-stat--sm { margin-top: 10px; padding: 11px 15px; font-size: 15px; }
@media (min-width: 900px) { .mo-listicle .mo-stat--sm { padding: 12px 16px; font-size: 15.5px; } }


.mo-listicle .mo-tl { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; }
.mo-listicle .mo-tl-rail { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 7px; }
.mo-listicle .mo-tl-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--color-brand); flex: none; }
.mo-listicle .mo-tl-line { width: 2px; flex: 1; background: var(--color-brand-tint); }
.mo-listicle .mo-tl-step { padding-bottom: var(--space-3); }
.mo-listicle .mo-tl-step:last-child { padding-bottom: 0; }
.mo-listicle .mo-tl-day { display: block; font-family: var(--font-sans); font-weight: 800; font-size: 19px; color: var(--color-brand); }


.mo-listicle .mo-btn--primary:hover, .mo-listicle .mo-btn--primary:focus-visible { filter: none; background: linear-gradient(135deg, #A64D22 0%, #89401D 100%); box-shadow: 0 10px 24px rgba(137,64,29,.26); transform: translateY(-1px); }
.mo-listicle .mo-btn--primary:active { filter: none; background: linear-gradient(135deg, #93441E 0%, #7A3819 100%); transform: translateY(0); }
.mo-listicle .mo-btn--secondary:hover, .mo-listicle .mo-btn--secondary:focus-visible { filter: none; background: #24401F; }
.mo-listicle .mo-btn--secondary:active { filter: none; background: #1D3419; }
.mo-listicle .mo-btn--tertiary:hover, .mo-listicle .mo-btn--tertiary:focus-visible { background: #F4F6F1; border-color: var(--color-brand); }


@keyframes moTruck { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(5px); } }
.mo-listicle .mo-truck svg { animation: moTruck 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-truck svg { animation: none; } }


.mo-listicle .mo-chart { flex: 1; display: flex; align-items: flex-end; gap: 10px; border-bottom: 2px solid var(--color-border-strong); }
.mo-listicle .mo-chart > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.mo-listicle .mo-chart-yr { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--color-text-2); }
.mo-listicle .mo-bar { width: 100%; border-radius: 8px 8px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .85s cubic-bezier(.22,.9,.24,1); }
.mo-listicle .mo-chart.is-in .mo-bar { transform: scaleY(1); }
.mo-listicle .mo-chart > div:nth-child(2) .mo-bar { transition-delay: .1s; }
.mo-listicle .mo-chart > div:nth-child(3) .mo-bar { transition-delay: .2s; }
.mo-listicle .mo-chart > div:nth-child(4) .mo-bar { transition-delay: .3s; }
.mo-listicle .mo-chart > div:nth-child(5) .mo-bar { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-bar { transform: none; transition: none; } }
.mo-listicle .mo-chart-legend { display: flex; gap: 10px; }
.mo-listicle .mo-chart-legend > span { flex: 1; text-align: center; font-family: var(--font-sans); font-size: 13px; line-height: 1.25; color: var(--color-text-2); }


.mo-listicle .mo-galthumbs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.mo-listicle .mo-galthumbs::-webkit-scrollbar { display: none; }
.mo-listicle .mo-galthumb { flex: 0 0 auto; scroll-snap-align: start; }
@media (max-width: 900px) { .mo-listicle .mo-galthumbs { justify-content: flex-start; } }
.mo-listicle .mo-galslide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; opacity: 0; }
.mo-listicle .mo-galslide.is-active { opacity: 1; }
.mo-listicle .mo-galthumb { padding: 0; background: var(--color-surface-soft); cursor: pointer; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); }
.mo-listicle .mo-galthumb.is-active { border: 2px solid var(--color-brand); }
.mo-listicle .mo-galthumb img { width: 62px; height: 62px; object-fit: cover; display: block; }


@keyframes moNeonSlide { to { background-position: 300% 0; } }
.mo-listicle .mo-subframe { position: relative; }
.mo-listicle .mo-subframe.is-on {
  padding: 2px; border-radius: calc(var(--radius-input) + 2px);
  background: linear-gradient(90deg, #F4842B, #FFC24A, #7CF1D0, #35C7F2, #F4842B);
  background-size: 300% 100%; animation: moNeonSlide 2.4s linear infinite;
  box-shadow: 0 0 18px rgba(53,199,242,.38);
}
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-subframe.is-on { animation: none; } }


.mo-listicle .mo-badge--save { background: var(--mo-mint, #EEF4EA); color: var(--color-brand); border: 1px solid var(--color-brand-tint); }
.mo-listicle .mo-badge--popular { background: var(--mo-orange-deep, #B85727); color: #fff; }
.mo-listicle .mo-badge--best { background: var(--color-brand); color: var(--color-bg); }


.mo-listicle .mo-pick {
  display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
  cursor: pointer; padding: var(--space-2); border-radius: var(--radius-input);
  background: var(--color-surface); border: 1.5px solid var(--color-border);
  transition: border-color .2s ease, background .2s ease;
}
.mo-listicle .mo-pick.is-selected { background: var(--color-surface-soft); border: 2px solid var(--color-brand); }
/* the amount actually charged: heavier and darker than the sachet count it sits
   beside, so it is not mistaken for small print */
.mo-listicle .mo-btotal { font-weight: 700; font-size: 15px; color: var(--color-text); white-space: nowrap; }

.mo-listicle .mo-pick > img { mix-blend-mode: multiply; }
.mo-listicle .mo-pick--plan { padding: var(--space-2) var(--space-3); }

.mo-listicle .mo-pick--sub.is-selected { border: none; }
.mo-listicle .mo-radio { width: 22px; height: 22px; border-radius: 999px; flex: none; background: var(--color-surface); border: 2px solid var(--color-border-strong); }
.mo-listicle .mo-pick.is-selected .mo-radio { border: 7px solid var(--color-brand); }
.mo-listicle .mo-was { display: none; }
.mo-listicle .is-sub .mo-was { display: block; }


.mo-listicle .mo-ctarow { justify-content: flex-start; }
@media (max-width: 900px) { .mo-listicle .mo-ctarow { justify-content: center; } }


.mo-listicle .mo-vs { max-width: 900px; }
.mo-listicle .mo-vsrow { display: grid; grid-template-columns: 1.1fr 1.1fr 1fr; }
.mo-listicle .mo-vslabel { padding: 14px 18px; font-family: var(--font-sans); font-size: 14.5px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; }
.mo-listicle .mo-vscell { padding: 14px 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-sans); font-size: 13.5px; color: var(--color-text-2); text-align: center; }
.mo-listicle .mo-vscell--win { background: rgba(78,125,63,.10); font-weight: 600; color: var(--color-text); }
.mo-listicle .mo-vslogo { height: 15px; width: auto; }
@media (min-width: 900px) {
  .mo-listicle .mo-vs { max-width: 1080px; }
  .mo-listicle .mo-vsrow { grid-template-columns: 1fr 1fr 1fr; }
  .mo-listicle .mo-vslabel { padding: 22px 32px; font-size: 20px; }
  .mo-listicle .mo-vscell { padding: 22px 24px; font-size: 18px; gap: 11px; }
  .mo-listicle .mo-vslogo { height: 21px; }
}


.mo-listicle .mo-why { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: stretch; }
.mo-listicle .mo-why > .mo-whyhero { order: -1; }
@media (min-width: 900px) { .mo-listicle .mo-why > .mo-whyhero { order: 0; } }
.mo-listicle .mo-whyhero { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); background: var(--color-surface-soft); box-shadow: 0 10px 28px rgba(45,76,38,.08); }
@media (min-width: 900px) {
  .mo-listicle .mo-why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
  .mo-listicle .mo-whyhero { aspect-ratio: auto; height: 100%; min-height: 520px; }
}
.mo-listicle .mo-whyrow { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 18px; align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.mo-listicle .mo-whyrow:last-child { border-bottom: none; }
.mo-listicle .mo-whyrow img { width: 58px; height: 58px; border-radius: 999px; object-fit: cover; flex: none; display: block; background: var(--color-surface-soft); }
.mo-listicle .mo-whyrow-title { display: block; font-family: var(--font-sans); font-weight: 800; font-size: 19px; line-height: 1.3; color: var(--color-brand); }
.mo-listicle .mo-whyrow p { font-size: 16px; line-height: 1.5; margin: 6px 0 0; }


.mo-listicle .mo-pillgrid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px; margin-top: var(--space-3); }
.mo-listicle .mo-checkpill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px;
  background: var(--mo-mint); border: 1px solid var(--color-brand-tint);
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--color-brand);
}

.mo-listicle .mo-checkpill svg, .mo-listicle .mo-trustchip svg { display: none; }
.mo-listicle .mo-checkpill::before, .mo-listicle .mo-trustchip::before {
  content: ""; flex: none; width: 5px; height: 5px; border-radius: 999px;
  background: currentColor; opacity: .65;
}
.mo-listicle .mo-checkpill::before { background: var(--color-brand-2); opacity: 1; }


.mo-listicle .mo-acc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; background: transparent; border: none;
  font-family: var(--font-sans); font-weight: 700; color: var(--color-text);
}
.mo-listicle .mo-acc-sym { font-weight: 600; color: var(--color-brand); flex: none; }
.mo-listicle .mo-acc-panel { display: none; }
.mo-listicle .mo-acc-panel.is-open { display: block; }

.mo-listicle .mo-acc--offer { border: 1px solid var(--color-border); border-radius: var(--radius-input); overflow: hidden; margin-top: var(--space-3); }
.mo-listicle .mo-acc--offer .mo-acc-item { border-bottom: 1px solid var(--color-border); }
.mo-listicle .mo-acc--offer .mo-acc-item:last-child { border-bottom: none; }
.mo-listicle .mo-acc--offer .mo-acc-btn { padding: var(--space-2) var(--space-3); font-size: 16px; }
.mo-listicle .mo-acc--offer .mo-acc-sym { font-size: 20px; }
.mo-listicle .mo-acc--offer .mo-acc-panel { padding: 0 var(--space-3) var(--space-2); }

.mo-listicle .mo-acc--faq { margin-top: var(--space-4); border-top: 1px solid var(--color-border-strong); }
.mo-listicle .mo-acc--faq .mo-acc-item { border-bottom: 1px solid var(--color-border-strong); }
.mo-listicle .mo-acc--faq .mo-acc-btn { padding: var(--space-3) 0; font-size: 18px; }
.mo-listicle .mo-acc--faq .mo-acc-sym { font-size: 24px; }
.mo-listicle .mo-acc--faq .mo-acc-panel { padding: 0 0 var(--space-3); }
.mo-listicle .mo-acc--faq .mo-acc-panel p { max-width: 64ch; }


.mo-listicle .mo-cart { display: none; position: fixed; inset: 0; z-index: 120; }
.mo-listicle .mo-cart.is-open { display: block; }
.mo-listicle .mo-cart-scrim { position: absolute; inset: 0; background: rgba(32,39,28,.45); opacity: 0; transition: opacity .3s ease; }
.mo-listicle .mo-cart.is-open .mo-cart-scrim { opacity: 1; }
.mo-listicle .mo-cart-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(400px, 92vw);
  background: var(--color-surface); box-shadow: -18px 0 46px rgba(45,76,38,.18);
  transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.9,.24,1);
  display: flex; flex-direction: column;
}
.mo-listicle .mo-cart.is-open .mo-cart-panel { transform: translateX(0); }
.mo-listicle .mo-cart-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-family: var(--font-sans); font-size: 15px; color: var(--color-text-2); }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-cart-panel, .mo-listicle .mo-cart-scrim { transition: none; } }


.mo-listicle .mo-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  box-shadow: 0 -10px 30px rgba(45,76,38,.14);
  transform: translateY(120%); transition: transform .35s ease;
}
.mo-listicle .mo-stickybar.is-up { transform: translateY(0); }

/* ============================================================================
   Floating WhatsApp button, bottom right. Mirrors the activity toast: sibling
   of the sticky bar so the same selector lifts it above the add-to-cart row.
   ============================================================================ */
.mo-listicle .mo-wa {
  position: fixed; right: 16px; bottom: 16px; z-index: 46;
  display: flex; align-items: center; gap: 10px; padding: 14px 22px 14px 18px;
  border-radius: 999px; background: #25D366; color: #fff; text-decoration: none;
  box-shadow: 0 12px 28px rgba(37, 211, 102, .38), 0 3px 10px rgba(32, 39, 28, .18);
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, bottom .35s ease;
}
.mo-listicle .mo-wa:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(37, 211, 102, .46), 0 3px 10px rgba(32, 39, 28, .2);
}
.mo-listicle .mo-wa:active { transform: translateY(0) scale(.98); }
.mo-listicle .mo-wa:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }
.mo-listicle .mo-stickybar.is-up ~ .mo-wa { bottom: 84px; }

.mo-listicle .mo-wa-icon { flex: none; display: grid; place-items: center; color: #fff; }
.mo-listicle .mo-wa-icon svg { width: 24px; height: 24px; }
.mo-listicle .mo-wa-label {
  font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1;
  letter-spacing: .01em; color: #fff; white-space: nowrap;
}

/* The pill only has to collapse once it would actually reach the activity toast
   on the other corner: 330px toast + 172px pill + margins needs ~540px. Above
   that the label stays, including in a narrow side-by-side preview pane. */
/* The bubble is the phone-only stand-in for the label the pill loses below.
   It pops up above the button rather than beside it, because the activity toast
   owns the space to the left. */
.mo-listicle .mo-wa-bubble { display: none; }

@media (max-width: 679px) {          /* longer 'Ask Anything / Instalment' label needs the room */
  .mo-listicle .mo-wa { right: 10px; bottom: 10px; padding: 0; gap: 0; width: 54px; height: 54px; place-content: center; }
  .mo-listicle .mo-wa-label { display: none; }
  .mo-listicle .mo-wa-icon svg { width: 27px; height: 27px; }
  .mo-listicle .mo-stickybar.is-up ~ .mo-wa { bottom: 70px; }

  .mo-listicle .mo-wa-bubble {
    display: block; position: absolute; right: 2px; bottom: calc(100% + 10px);
    padding: 7px 12px; border-radius: 14px; background: var(--color-surface);
    color: var(--color-text); white-space: nowrap;
    font-family: var(--font-sans); font-weight: 700; font-size: 12.5px; line-height: 1;
    box-shadow: 0 8px 20px rgba(32, 39, 28, .22);
    opacity: 0; transform-origin: 85% 100%;
    animation: moWaBubble 9s var(--ease-out) infinite;
  }
  /* the little tail, pointing down at the button */
  .mo-listicle .mo-wa-bubble::after {
    content: ""; position: absolute; right: 18px; bottom: -5px;
    width: 12px; height: 12px; background: var(--color-surface); border-radius: 2px;
    transform: rotate(45deg);
  }
}

@keyframes moWaBubble {
  0%, 6%    { opacity: 0; transform: translateY(6px) scale(.86); }
  12%, 44%  { opacity: 1; transform: translateY(0) scale(1); }
  52%, 100% { opacity: 0; transform: translateY(4px) scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-wa-bubble { animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-wa, .mo-listicle .mo-wa:hover, .mo-listicle .mo-wa:active { transform: none; }
}

/* ============================================================================
   Recent activity toast, bottom left. It sits below the sticky bar in the DOM
   so the sibling selector can lift it clear the moment that bar slides up —
   the toast must never cover the add-to-cart button.
   ============================================================================ */
.mo-listicle .mo-proof {
  position: fixed; left: 16px; bottom: 16px; z-index: 45;
  display: flex; align-items: center; gap: 12px;
  width: min(330px, calc(100vw - 32px)); padding: 10px 34px 10px 10px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: 0 14px 34px rgba(45, 76, 38, .18);
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out), bottom .35s ease;
  pointer-events: auto;
}
.mo-listicle .mo-proof[hidden] { display: none; }
.mo-listicle .mo-proof.is-in { opacity: 1; transform: translateY(0); }
.mo-listicle .mo-stickybar.is-up ~ .mo-proof { bottom: 84px; }

.mo-listicle .mo-proof-img {
  width: 52px; height: 52px; flex: none; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--color-surface-soft);
}
.mo-listicle .mo-proof-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mo-listicle .mo-proof-line {
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.35; color: var(--color-text);
}
.mo-listicle .mo-proof-line b { font-weight: 700; }
.mo-listicle .mo-proof-meta {
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.3; color: var(--color-text-2);
}
.mo-listicle .mo-proof-x {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; cursor: pointer; border: none; border-radius: 999px;
  background: transparent; color: var(--color-text-2);
}
.mo-listicle .mo-proof-x:hover { background: var(--color-surface-soft); color: var(--color-text); }

/* On phones the toast shares the bottom edge with the WhatsApp button AND its
   "Ask anything" bubble, which sits above that button. 120px is what the two of
   them need, plus a visible gap; without it the toast slides under the bubble. */
@media (max-width: 479px) {
  .mo-listicle .mo-proof { width: calc(100vw - 130px); }
}
@media (max-width: 699px) {
  .mo-listicle .mo-proof { left: 10px; bottom: 10px; padding: 9px 30px 9px 9px; gap: 10px; }
  .mo-listicle .mo-proof-img { width: 44px; height: 44px; }
  .mo-listicle .mo-proof-line { font-size: 12.5px; }
  .mo-listicle .mo-stickybar.is-up ~ .mo-proof { bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-proof { transition: opacity .2s linear; transform: none; }
  .mo-listicle .mo-proof.is-in { transform: none; }
}
.mo-listicle .mo-stickyrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: 10px; }
.mo-listicle .mo-stickyinfo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mo-listicle .mo-stickyinfo img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--radius-sm); flex: none; background: var(--color-surface-soft); }
.mo-listicle .mo-stickytitle {
  display: block; font-family: var(--font-sans); font-weight: 700; font-size: 16px; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mo-listicle .mo-stickymeta { display: block; font-family: var(--font-sans); font-size: 13px; color: var(--color-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-listicle .mo-stickymeta b { color: var(--color-brand); font-weight: 700; }
.mo-listicle .mo-stickycta { min-height: 48px; padding: 0 var(--space-3); font-size: 15px; flex: none; cursor: pointer; }
.mo-listicle .mo-stickycta[aria-busy="true"] { opacity: .75; pointer-events: none; }


@media (max-width: 600px) {
  .mo-listicle .mo-stickyrow { padding-block: 6px; gap: 10px; }
  .mo-listicle .mo-stickyinfo { gap: 9px; }
  .mo-listicle .mo-stickyinfo img { width: 34px; height: 34px; }
  .mo-listicle .mo-stickytitle { font-size: 13.5px; }
  .mo-listicle .mo-stickymeta { font-size: 12px; }
  .mo-listicle .mo-stickymeta { font-size: 11.5px; }          
  .mo-listicle .mo-stickycta { min-height: 38px; padding: 0 16px; font-size: 14px; }
}


.mo-listicle .mo-quad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 1100px) { .mo-listicle .mo-quad-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .mo-listicle .mo-quad-grid { grid-template-columns: 1fr; } }
.mo-listicle [hidden] { display: none !important; }


/* ============================================================================
   Theme chrome, hidden for this template only.
   The sections still render and their scripts still execute — display:none does
   not stop JavaScript. Nothing in layout/theme.liquid is modified, so
   content_for_header (Shopify analytics + any web pixels) runs exactly as on
   every other page.
   ============================================================================ */
#header-group,
.shopify-section-group-header-group,
.shopify-section-group-footer-group,
#shopify-section-footer { display: none !important; }

/* Let the page run full-bleed inside <main id="MainContent"> */
#MainContent.content-for-layout { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body { --header-height: 0px; --header-group-height: 0px; }

/* scroll-behavior only works on the scrolling root, so these two stay unscoped.
   Safe: this stylesheet is only loaded by sections/mo-listicle-sg.liquid. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ============================================================================
   Copy/save protection: text not selectable, images not draggable or
   long-press-saveable. Form fields stay selectable.
   ============================================================================ */
.mo-listicle { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; }
.mo-listicle input, .mo-listicle textarea { -webkit-user-select: text; -moz-user-select: text; user-select: text; }
.mo-listicle img, .mo-listicle video { -webkit-user-drag: none; -webkit-touch-callout: none; }



/* ---------------------------------------------------------------- upsell --
   "Often bought together" cross-sell, sitting between the bundle ladder and
   the checkout button. Ported from the SG PDP so both pages sell LiveOn the
   same way; re-tokenised onto the listicle's palette. */
.mo-listicle .mo-upsell { display: block; margin-top: var(--space-3); padding: 15px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface-soft); transition: border-color .15s ease, background .15s ease; }
.mo-listicle .mo-upsell.is-on { border-color: var(--color-brand); background: #F4F8F1; }
.mo-listicle .mo-upsell-eyebrow { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--color-text-2); }
.mo-listicle .mo-upsell-badge { margin-left: auto; font-size: 11px; padding: 3px 10px; letter-spacing: 0; text-transform: none; }

.mo-listicle .mo-upsell-pick { position: relative; display: flex; align-items: flex-start; gap: 13px; margin-top: 13px; cursor: pointer; }
.mo-listicle .mo-upsell-thumb { flex: none; width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-surface-soft); }
.mo-listicle .mo-upsell-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mo-listicle .mo-upsell-title { font-family: var(--font-sans); font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--color-text); }
.mo-listicle .mo-upsell-sub { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 15px; line-height: 1.45; color: var(--color-text-2); text-wrap: pretty; }
.mo-listicle .mo-upsell-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 12px; font-family: var(--font-sans); }
.mo-listicle .mo-upsell-price s { font-size: 15px; color: var(--color-text-2); }
.mo-listicle .mo-upsell-price b { font-size: 21px; font-weight: 800; color: var(--color-text); }
.mo-listicle .mo-upsell-price span { font-size: 13.5px; font-weight: 700; color: #B85727; }

.mo-listicle .mo-upsell-check { flex: none; margin-top: 27px; width: 23px; height: 23px; border-radius: 7px; border: 2px solid var(--color-border-strong); background: var(--color-surface); position: relative; transition: background .15s ease, border-color .15s ease, box-shadow .2s ease; }
.mo-listicle .mo-upsell-check::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--color-surface); border-width: 0 2.4px 2.4px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.mo-listicle .mo-upsell.is-on .mo-upsell-check { background: var(--color-brand); border-color: var(--color-brand); }
.mo-listicle .mo-upsell.is-on .mo-upsell-check::after { opacity: 1; transform: rotate(45deg) scale(1); }
/* the self-check can highlight the box, but it never ticks it for them */
.mo-listicle .mo-upsell.is-match:not(.is-on) .mo-upsell-check { border-color: var(--color-brand); box-shadow: 0 0 0 4px var(--color-brand-tint); }


/* --- compact layout: the card is always in a narrow drawer --- */
.mo-listicle .mo-upsell { padding: 13px 14px; }
.mo-listicle .mo-upsell-sub { font-size: 14.5px; }

/* Phone layout. The three-column flex squeezes the copy into a ~140px
   gutter, so the title wraps twice and the sentence ends up five ragged
   lines. Here the thumb row keeps its columns and everything below it
   spans the full card width instead.
   `display: contents` lifts the copy children into this grid, so the
   re-flow needs no second set of markup. */
.mo-listicle .mo-upsell-pick {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  margin-top: 10px;
}
.mo-listicle .mo-upsell-copy { display: contents; }
.mo-listicle .mo-upsell-check { grid-column: 1; grid-row: 1; margin-top: 20px; }
.mo-listicle .mo-upsell-thumb { grid-column: 2; grid-row: 1; width: 64px; height: 64px; }
.mo-listicle .mo-upsell-title { grid-column: 3; grid-row: 1; align-self: center; text-wrap: balance; }
.mo-listicle .mo-upsell-sub   { grid-column: 1 / -1; grid-row: 2; margin-top: 2px; }
.mo-listicle .mo-upsell-qty   { grid-column: 1 / -1; grid-row: 3; margin-top: 3px; }
.mo-listicle .mo-upsell-price { grid-column: 1 / -1; grid-row: 4; margin-top: 1px; }

/* tap target = the whole thumb row (check, image, title), never the pills */
.mo-listicle .mo-upsell-hit { width: 100%; height: 68px; }

@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-upsell, .mo-listicle .mo-upsell-check, .mo-listicle .mo-upsell-check::after,
  }
/* -------------------------------------------------------------- /upsell -- */


/* LiveOn box ladder inside the upsell. Small on purpose: it is a secondary
   decision sitting inside an optional block, so it must not out-shout the
   MoveOn bundle picker directly above it. */
.mo-listicle .mo-upsell-qty { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.mo-listicle .mo-upsell-qty button { min-width: 34px; height: 30px; padding: 0 9px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); cursor: pointer; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--color-text-2); transition: background .12s ease, border-color .12s ease, color .12s ease; }
.mo-listicle .mo-upsell-qty button:hover { border-color: var(--color-brand); color: var(--color-brand); }
.mo-listicle .mo-upsell-qty button.is-on { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-bg); }
.mo-listicle .mo-upsell-qty-unit { font-family: var(--font-sans); font-size: 13.5px; color: var(--color-text-2); }
/* the tick target is the checkbox + thumb, so clicking a qty pill never toggles it */
.mo-listicle .mo-upsell-hit { position: absolute; left: 0; top: 0; width: 102px; height: 82px; border: 0; padding: 0; background: none; cursor: pointer; }
@media (max-width: 767px) { .mo-listicle .mo-upsell-hit { width: 88px; height: 70px; } }

/* Spacing is owned by the grid's row-gap, not by per-item margins.
   Two things were fighting it before:
     - the grid inherited `gap: 13px` from the flex base, so every row
       carried a hidden 13px on top of its margin
     - the qty ladder's base rule is declared after the first mobile block,
       so its 12px margin beat the override there
   Declaring both here, last, keeps one number in charge of the rhythm. */
.mo-listicle .mo-upsell-pick { column-gap: 12px; row-gap: 11px; }
.mo-listicle .mo-upsell-sub,
.mo-listicle .mo-upsell-qty,
.mo-listicle .mo-upsell-price { margin-top: 0; }
/* the match line is a caption on the price, so it sits closer than a row */




/* The order total. Was a strip pinned between two hairlines, which read as a
   table row and put four competing type treatments on one line. It is a
   RESULT, so it gets a soft filled block, one muted weight for the working,
   and all the emphasis on the number the customer actually pays. */
.mo-listicle .mo-sumline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; margin: 11px 0 0; padding: 10px 12px; border: 0; border-radius: var(--radius-input); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); font-family: var(--font-sans); font-size: 13.5px; line-height: 1.35; color: var(--color-text-2); }
.mo-listicle .mo-sumline > span { white-space: nowrap; }
.mo-listicle .mo-sumline b,
.mo-listicle .mo-sumline i { font-weight: 400; font-style: normal; color: var(--color-text-2); }
.mo-listicle .mo-sum-eq { display: inline-flex; align-items: baseline; gap: 6px; margin-left: auto; }
.mo-listicle .mo-sumline strong { font-weight: 800; font-size: 19px; color: var(--color-brand); }
.mo-listicle .mo-sumline[hidden] { display: none; }
@media (max-width: 767px) { .mo-listicle .mo-sumline { font-size: 13px; padding: 9px 11px; } }


/* Looping attention pulse on the LiveOn tick box.
   The card now sits BELOW the checkout button, so nothing else draws the eye
   down to it. A ring expands out of the box and fades, with a long rest
   between beats so it reads as a nudge rather than a flashing banner.
   Runs only while the box is empty — the moment it is ticked the job is done. */
@keyframes mo-upsell-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 76, 38, .38); }
  45%  { box-shadow: 0 0 0 10px rgba(45, 76, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 76, 38, 0); }
}
@keyframes mo-upsell-pulse-edge {
  0%, 100% { border-color: var(--color-border-strong); }
  22%      { border-color: var(--color-brand); }
}
.mo-listicle .mo-upsell:not(.is-on) .mo-upsell-check {
  animation: mo-upsell-pulse 2.8s ease-out infinite, mo-upsell-pulse-edge 2.8s ease-out infinite;
}
/* already nudged by the self-check? beat a little sooner and a little harder */
.mo-listicle .mo-upsell.is-match:not(.is-on) .mo-upsell-check { animation-duration: 2s; }

@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-upsell:not(.is-on) .mo-upsell-check { animation: none; }
}


/* The cart panel is a column flex box, so the scrolling body needs an explicit
   min-height:0 — without it the body refuses to shrink below its content and
   pushes the totals + Checkout button off the bottom of the panel. Belt and
   braces here in case the inline style is ever lost. */
.mo-listicle .mo-cart-panel > div[style*="overflow-y"] { min-height: 0; }
.mo-listicle .mo-cart-panel { max-height: 100%; }
.mo-listicle .mo-cart-panel { height: 100dvh; }

/* On a phone the drawer has to hold two line items, the offer card, the perks
   and the totals, so the offer card runs at a smaller scale in there. */
@media (max-width: 767px) {
  .mo-listicle .mo-cart .mo-upsell { padding: 12px 13px; }
  .mo-listicle .mo-cart .mo-upsell-pick { grid-template-columns: auto 48px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; margin-top: 8px; }
  .mo-listicle .mo-cart .mo-upsell-thumb { width: 48px; height: 48px; }
  .mo-listicle .mo-cart .mo-upsell-check { margin-top: 12px; width: 21px; height: 21px; }
  .mo-listicle .mo-cart .mo-upsell-hit { height: 52px; }
  .mo-listicle .mo-cart .mo-upsell-title { font-size: 15.5px; }
  .mo-listicle .mo-cart .mo-upsell-sub { font-size: 13.5px; line-height: 1.4; }
  .mo-listicle .mo-cart .mo-upsell-qty button { min-width: 30px; height: 27px; padding: 0 8px; font-size: 13px; }
  .mo-listicle .mo-cart .mo-upsell-qty-unit { font-size: 12.5px; }
  .mo-listicle .mo-cart .mo-upsell-price b { font-size: 18px; }
  .mo-listicle .mo-cart .mo-upsell-price s,
  .mo-listicle .mo-cart .mo-upsell-price span { font-size: 12.5px; }
}


/* Once LiveOn is in the order the card STAYS — it just changes state. Hiding it
   and moving the product to a line item further up read as "it disappeared". */
.mo-listicle .mo-upsell.is-on .mo-upsell-eyebrow { color: var(--color-brand); }






/* the reminder rides inside the body copy rather than as its own line */
.mo-listicle .mo-upsell-sub b { font-weight: 700; color: var(--color-text); }


/* ------------------------------------------------------------- sum line --
   One line, always. Box counts ride as x3 rather than "3 boxes" so the whole
   equation still fits a 375px card without wrapping. Small on purpose: it is
   a receipt, not a headline. */
.mo-listicle .mo-sumline { display: flex; align-items: baseline; flex-wrap: nowrap; white-space: nowrap; gap: 2px 5px; margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius-input); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border); font-family: var(--font-sans); font-size: 12.5px; line-height: 1.3; color: var(--color-text-2); }
.mo-listicle .mo-sumline[hidden] { display: none; }
.mo-listicle .mo-sumline > span { white-space: nowrap; }
.mo-listicle .mo-sumline b, .mo-listicle .mo-sumline i { font-weight: 600; font-style: normal; color: var(--color-text-2); }
.mo-listicle .mo-sumline strong { margin-left: 1px; font-weight: 800; font-size: 15.5px; color: var(--color-brand); }
.mo-listicle .mo-sumline em { margin-left: 3px; font-style: normal; font-size: 11.5px; font-weight: 700; white-space: nowrap; color: #B85727; }
.mo-listicle .mo-sumline em:empty { display: none; }
@media (max-width: 767px) {
  /* one line at ANY phone width: the type scales with the viewport instead of
     sitting at a fixed size that wraps 6px short on a 375. */
  .mo-listicle .mo-sumline { font-size: 12px; gap: 2px 5px; padding: 7px 10px; }
  .mo-listicle .mo-sumline strong { font-size: 15px; }
  .mo-listicle .mo-sumline em { font-size: 11px; }
}

/* --------------------------------------------------- LiveOn explainer modal --
   Opened from either upsell card. Centred sheet on desktop, near full-height
   on a phone, with the stack image doing the headline work at the top. */
.mo-listicle .mo-lo { display: none; position: fixed; inset: 0; z-index: 140; }
.mo-listicle .mo-lo.is-open { display: block; }
.mo-listicle .mo-lo-scrim { position: absolute; inset: 0; background: rgba(28,38,24,.55); backdrop-filter: blur(2px); }
.mo-listicle .mo-lo-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(860px, 92vw); max-height: min(94vh, 1180px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(28,38,24,.34);
}
.mo-listicle .mo-lo-x { position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border: 0; border-radius: 999px; background: rgba(255,255,255,.9); cursor: pointer; font-size: 22px; line-height: 1; color: var(--color-text); box-shadow: 0 2px 10px rgba(28,38,24,.18); }
.mo-listicle .mo-lo-hero { display: block; width: calc(100% + 44px); max-width: none; height: 400px; max-height: 400px; object-fit: contain; background: #182316; margin: -20px -22px 16px; }
.mo-listicle .mo-lo-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mo-listicle .mo-lo-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 22px 4px; }
.mo-listicle .mo-lo-body p { margin: 0 0 12px; font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--color-text-2); text-wrap: pretty; }
.mo-listicle .mo-lo-lead { font-size: 17px !important; color: var(--color-text) !important; }
.mo-listicle .mo-lo-sub { margin: 20px 0 8px; font-family: var(--font-sans); font-size: 18px; font-weight: 800; color: var(--color-text); }

.mo-listicle .mo-lo-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 4px; }
.mo-listicle .mo-lo-col { padding: 14px 15px; border-radius: var(--radius-input); background: var(--color-surface-soft); }
.mo-listicle .mo-lo-col--alt { background: #F4F8F1; }
.mo-listicle .mo-lo-tag { display: inline-block; font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--color-brand); }
.mo-listicle .mo-lo-col b { display: block; margin: 5px 0 6px; font-family: var(--font-sans); font-size: 16px; font-weight: 800; color: var(--color-text); }
.mo-listicle .mo-lo-col p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.45 !important; }

.mo-listicle .mo-lo-areas { display: flex; flex-wrap: wrap; gap: 7px; margin: 4px 0 12px; }
.mo-listicle .mo-lo-area { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--color-surface-soft); font-family: var(--font-sans); font-size: 13.5px; color: var(--color-text); }
.mo-listicle .mo-lo-area b { font-weight: 800; color: var(--color-brand); }

.mo-listicle .mo-lo-foot { flex: none; padding: 14px 22px 18px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; background: var(--color-surface); }
.mo-listicle .mo-lo-nope { background: none; border: 0; padding: 6px; cursor: pointer; align-self: center; font-family: var(--font-sans); font-size: 14.5px; font-weight: 600; color: var(--color-text-2); text-decoration: underline; text-underline-offset: 4px; }


@media (max-width: 767px) {
  .mo-listicle .mo-lo-panel { width: 100vw; max-height: 92dvh; left: 0; top: auto; bottom: 0; transform: none; border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .mo-listicle .mo-lo-body { padding: 16px 16px 4px; }
  .mo-listicle .mo-lo-hero { width: calc(100% + 32px); margin: -16px -16px 14px; }
  .mo-listicle .mo-lo-body p { font-size: 15.5px; }
  .mo-listicle .mo-lo-split { grid-template-columns: 1fr; }
  .mo-listicle .mo-lo-foot { padding: 12px 16px 16px; }
}


/* the "today / tomorrow" frame, sitting right under the stack image */
.mo-listicle .mo-lo-frame { margin: 0 0 14px !important; font-family: var(--font-sans); font-size: 19px !important; font-weight: 800; line-height: 1.3; color: var(--color-text) !important; text-wrap: balance; }
.mo-listicle .mo-lo-frame em { font-style: normal; color: var(--color-brand); }

/* the eleven actives */
.mo-listicle .mo-lo-ing { list-style: none; margin: 4px 0 14px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mo-listicle .mo-lo-ing li { display: grid; grid-template-columns: 54px 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-border); font-family: var(--font-sans); }
.mo-listicle .mo-lo-ing li:last-child { border-bottom: 0; }
.mo-listicle .mo-lo-ing b { font-size: 15.5px; font-weight: 700; color: var(--color-text); }
.mo-listicle .mo-lo-ing-n { grid-column: 3; grid-row: 1; align-self: center; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--color-brand); }
.mo-listicle .mo-lo-ing li > span:last-child { grid-column: 2 / -1; font-size: 14px; line-height: 1.45; color: var(--color-text-2); text-wrap: pretty; }

/* the add button was full lg height; on a phone that is a lot of the sheet */
.mo-listicle .mo-lo-add { min-height: 52px; font-size: 16px; }
@media (max-width: 767px) {
  .mo-listicle .mo-lo-add { min-height: 46px; padding-block: 0; font-size: 15px; }
  .mo-listicle .mo-lo-nope { font-size: 13.5px; padding: 3px; }
  .mo-listicle .mo-lo-foot { padding: 10px 16px 12px; gap: 5px; }
  .mo-listicle .mo-lo-frame { font-size: 17px !important; }
  .mo-listicle .mo-lo-ing b { font-size: 15px; }
}

/* the clinical macro shots. Mixed source ratios (480x480 and 480x358), so they
   are cropped square to sit in one even column. */
.mo-listicle .mo-lo-ing img { grid-column: 1; grid-row: 1 / span 2; width: 54px; height: 54px; object-fit: cover; border-radius: 999px; background: var(--color-surface-soft); display: block; }
.mo-listicle .mo-lo-ing b { grid-column: 2; grid-row: 1; align-self: end; }
@media (max-width: 767px) {
  .mo-listicle .mo-lo-ing li { grid-template-columns: 46px 1fr auto; gap: 2px 10px; }
  .mo-listicle .mo-lo-ing img { width: 46px; height: 46px; }
}


/* The ingredient rundown is its own chapter of the sheet, so it sits on a
   tinted band that runs the full width of the panel — a heading alone was not
   enough to tell it apart from the paragraphs above and below it. */
.mo-listicle .mo-lo-ingblock { margin: 22px -22px 18px; padding: 4px 22px 6px; background: #F4F8F1; border-top: 1px solid var(--color-brand-tint); border-bottom: 1px solid var(--color-brand-tint); }
.mo-listicle .mo-lo-ingblock .mo-lo-sub { margin-top: 18px; }
.mo-listicle .mo-lo-ing li { border-bottom-color: rgba(45,76,38,.13); }
.mo-listicle .mo-lo-ing img { background: #fff; box-shadow: 0 0 0 1px rgba(45,76,38,.10); }
@media (max-width: 767px) {
  .mo-listicle .mo-lo-ingblock { margin: 18px -16px 16px; padding: 2px 16px 4px; }
}


/* The age curve, sitting between the explanation and the benefit list: it is
   the picture of the problem the paragraphs above just described. Full-bleed
   because the image carries its own cream field and title. */
.mo-listicle .mo-lo-fig { margin: 18px -22px; padding: 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.mo-listicle .mo-lo-fig img { display: block; width: 100%; height: auto; }
.mo-listicle .mo-lo-fig figcaption { padding: 10px 22px 12px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.45; color: var(--color-text-2); background: var(--color-surface); text-wrap: pretty; }
@media (max-width: 767px) {
  .mo-listicle .mo-lo-fig { margin: 16px -16px; }
  .mo-listicle .mo-lo-fig figcaption { padding: 9px 16px 11px; font-size: 12.5px; }
}


/* "Do you need LiveOn?" — the bridge section. The market already sells these
   two together as a joint pack, so this meets that belief head on (yes, it
   works on the joint) before widening out. Inset panel rather than a full-bleed
   band, so it does not read as a second copy of the ingredient section. */
.mo-listicle .mo-lo-need { margin: 18px 0 16px; padding: 0; }
.mo-listicle .mo-lo-need .mo-lo-sub { margin-top: 0; }
.mo-listicle .mo-lo-need p b { font-weight: 700; color: var(--color-text); }
.mo-listicle .mo-lo-need-lead { display: block; margin: 14px 0 8px; font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--color-text); }
.mo-listicle .mo-lo-checks { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
@media (max-width: 767px) {
  }

/* the last line of the checklist is the one the others build to, so it lands
   a little heavier than the symptoms above it */
.mo-listicle .mo-lo-checks li.is-last { margin-top: 2px; padding-top: 10px; border-top: 1px dashed var(--color-border); font-weight: 700; color: var(--color-brand); }

/* the escalation line: the point where LiveOn stops being "the other box" */
.mo-listicle .mo-lo-pull { margin: 0 0 4px !important; padding: 12px 14px; border-radius: var(--radius-input); background: #F4F8F1; border-left: 3px solid var(--color-brand); font-size: 16px !important; font-weight: 700; line-height: 1.45 !important; color: var(--color-text) !important; text-wrap: pretty; }
@media (max-width: 767px) { .mo-listicle .mo-lo-pull { font-size: 15px !important; padding: 11px 12px; } }


/* the section heading that asks the question, called out from the other subs */
.mo-listicle .mo-lo-need .mo-lo-sub { text-transform: uppercase; letter-spacing: .08em; font-size: 15px; color: #BE3A26; }
@media (max-width: 767px) { .mo-listicle .mo-lo-need .mo-lo-sub { font-size: 14px; letter-spacing: .06em; } }

/* the wider sheet gets more room between the columns and a roomier read */
@media (min-width: 768px) {
  .mo-listicle .mo-lo-body { padding: 22px 30px 4px; }
  .mo-listicle .mo-lo-hero { width: calc(100% + 60px); margin: -22px -30px 18px; }
  .mo-listicle .mo-lo-fig { margin: 18px -30px; }
  .mo-listicle .mo-lo-fig figcaption { padding: 10px 30px 12px; }
  .mo-listicle .mo-lo-ingblock { margin: 22px -30px 18px; padding: 4px 30px 6px; }
  .mo-listicle .mo-lo-split { gap: 14px; }
  .mo-listicle .mo-lo-foot { padding: 14px 30px 18px; }
}


/* The chart is 1100px of artwork. On the widened desktop sheet it was blowing
   up to the full 860px and swamping the copy, so it is capped and centred on
   its own cream field (sampled from the image edge) instead of stretched. */
@media (min-width: 768px) {
  .mo-listicle .mo-lo-fig { background: var(--color-surface); }
  .mo-listicle .mo-lo-fig img { max-width: 540px; margin: 0 auto; padding-block: 6px; }
}

.mo-listicle .mo-lo-checks li { margin: 0; }
.mo-listicle .mo-lo-check { position: relative; display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--font-sans); font-size: 15px; line-height: 1.45; color: var(--color-text); text-wrap: pretty; }
.mo-listicle .mo-lo-check input { position: absolute; left: 0; top: 3px; width: 19px; height: 19px; margin: 0; opacity: 0; }
.mo-listicle .mo-lo-box { flex: none; margin-top: 2px; width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--color-border-strong); background: var(--color-surface); position: relative; transition: background .13s ease, border-color .13s ease; }
.mo-listicle .mo-lo-box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--color-surface); border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(.5); opacity: 0; transition: opacity .13s ease, transform .13s ease; }
.mo-listicle .mo-lo-check input:checked + .mo-lo-box { background: var(--color-brand); border-color: var(--color-brand); }
.mo-listicle .mo-lo-check input:checked + .mo-lo-box::after { opacity: 1; transform: rotate(45deg) scale(1); }
.mo-listicle .mo-lo-check input:focus-visible + .mo-lo-box { box-shadow: 0 0 0 3px var(--color-brand-tint); }
.mo-listicle .mo-lo-checks li.is-last .mo-lo-check { font-weight: 700; color: var(--color-brand); }
@media (max-width: 767px) { .mo-listicle .mo-lo-check { font-size: 14.5px; } }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-lo-box, .mo-listicle .mo-lo-box::after { transition: none; } }

/* the claim that follows the curve: carries more weight than body copy without
   needing a heading of its own */
.mo-listicle .mo-lo-claim { font-size: 17px !important; font-weight: 600; color: var(--color-text) !important; }
@media (max-width: 767px) { .mo-listicle .mo-lo-claim { font-size: 16px !important; } }


.mo-listicle .mo-lo-fig--card { border-top: 0; margin-top: 22px; }
@media (min-width: 768px) { .mo-listicle .mo-lo-fig--card img { max-width: 470px; } }


/* The explainer trigger, on the CLAY accent rather than green: the upsell
   card turns green the moment it is ticked, and a green trigger inside a green
   card vanished. Warm reads against both card states.
   It was a quiet underlined link and was easy to scroll
   straight past, but it carries the whole argument for the add-on — so it is
   now a full-width card with its own icon, a reason to tap, and how long it
   takes. The arrow nudges on hover; nothing loops, because the tick box beside
   it is already pulsing and two moving things would compete. */
.mo-listicle .mo-upsell-more { display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 12px; padding: 11px 13px; border: 1px solid #E6C3AC; border-radius: var(--radius-input); background: #FBF1EA; cursor: pointer; text-align: left; font-family: var(--font-sans); transition: background .15s ease, border-color .15s ease, box-shadow .2s ease; }
.mo-listicle .mo-upsell-more:hover { background: #F7E7DA; border-color: #B85727; box-shadow: 0 3px 12px rgba(184,87,39,.16); }
.mo-listicle .mo-upsell-more:hover .mo-upsell-more-go { transform: translateX(3px); }
.mo-listicle .mo-upsell-more-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: #B85727; color: #fff; }
.mo-listicle .mo-upsell-more-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mo-listicle .mo-upsell-more-tx b { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.mo-listicle .mo-upsell-more-tx em { font-style: normal; font-size: 12.5px; line-height: 1.3; color: #8A6A56; }
.mo-listicle .mo-upsell-more-go { flex: none; display: inline-flex; color: #B85727; transition: transform .15s ease; }
@media (max-width: 767px) {
  .mo-listicle .mo-upsell-more { padding: 10px 11px; gap: 9px; }
  .mo-listicle .mo-upsell-more-ic { width: 27px; height: 27px; }
  .mo-listicle .mo-upsell-more-tx b { font-size: 14px; }
  .mo-listicle .mo-upsell-more-tx em { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-upsell-more, .mo-listicle .mo-upsell-more-go { transition: none; }
}


/* Glow loop on the whole card while LiveOn is not in the order. Timed to the
   SAME 2.8s as the tick-box pulse so the two read as one heartbeat instead of
   two competing rhythms, and it stops the moment the box is ticked. */
@keyframes mo-upsell-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,76,38,0); border-color: var(--color-border); }
  45%      { box-shadow: 0 0 0 5px rgba(45,76,38,.13); border-color: var(--color-brand); }
}
.mo-listicle .mo-upsell:not(.is-on) { animation: mo-upsell-glow 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-upsell:not(.is-on) { animation: none; }
}

.mo-listicle .mo-lo-col b em { font-style: normal; color: var(--color-brand); }


/* the group chips are buttons now */
.mo-listicle .mo-lo-area { border: 1px solid transparent; cursor: pointer; transition: background .13s ease, border-color .13s ease; }
.mo-listicle .mo-lo-area:hover { border-color: var(--color-brand-tint); }
.mo-listicle .mo-lo-area.is-on { background: var(--color-brand); color: var(--color-bg); border-color: var(--color-brand); }
.mo-listicle .mo-lo-area.is-on b { color: var(--color-bg); }
.mo-listicle .mo-lo-area--all { font-weight: 700; color: var(--color-brand); background: transparent; border-color: var(--color-brand); }
.mo-listicle .mo-lo-area--all.is-on { color: var(--color-bg); }

/* one fixed-height reveal panel, shared by every group */
.mo-listicle .mo-lo-blist { max-height: 260px; overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-input); background: var(--color-surface-soft); border: 1px solid var(--color-border); }
.mo-listicle .mo-lo-blist[hidden] { display: none; }
.mo-listicle .mo-lo-blist h4 { margin: 12px 0 6px; font-family: var(--font-sans); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-brand); }
.mo-listicle .mo-lo-blist h4:first-child { margin-top: 0; }
.mo-listicle .mo-lo-blist ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px; }
.mo-listicle .mo-lo-blist li { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.45; color: var(--color-text); text-wrap: pretty; }
.mo-listicle .mo-lo-blist li::marker { color: var(--color-text-2); font-size: 12.5px; }
@media (max-width: 767px) {
  .mo-listicle .mo-lo-blist { max-height: 220px; padding: 11px 12px; }
  .mo-listicle .mo-lo-blist li { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-lo-area { transition: none; } }


/* verdict: warms up as the ticks add up */
.mo-listicle .mo-lo-verdict { margin: 12px 0 0; padding: 11px 13px; border-radius: var(--radius-input); font-family: var(--font-sans); font-size: 14.5px; line-height: 1.45; font-weight: 600; text-wrap: pretty; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.mo-listicle .mo-lo-verdict[hidden] { display: none; }
.mo-listicle .mo-lo-verdict.is-lvl1 { background: var(--color-surface-soft); color: var(--color-text); }
.mo-listicle .mo-lo-verdict.is-lvl2 { background: #EFF3EC; color: var(--color-brand); }
.mo-listicle .mo-lo-verdict.is-lvl3 { background: #E4EDDE; color: var(--color-brand); font-weight: 700; }
.mo-listicle .mo-lo-verdict.is-lvl4 { background: var(--color-brand); color: var(--color-bg); font-weight: 700; box-shadow: 0 4px 16px rgba(45,76,38,.22); }
@media (max-width: 767px) { .mo-listicle .mo-lo-verdict { font-size: 14px; padding: 10px 12px; } }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-lo-verdict { transition: none; } }

/* top tier keeps breathing, so the strongest verdict does not just sit there */
@keyframes mo-lo-verdict-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,76,38,.38), 0 4px 16px rgba(45,76,38,.22); }
  55%      { box-shadow: 0 0 0 8px rgba(45,76,38,0), 0 6px 22px rgba(45,76,38,.34); }
}
.mo-listicle .mo-lo-verdict.is-lvl4 { animation: mo-lo-verdict-glow 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-lo-verdict.is-lvl4 { animation: none; } }


/* ------------------------------------------------------ mobile gutters --
   Every section is laid out inside .mo-container, which ran a 24px gutter
   (--space-3) on phones. That is a lot of dead edge on a 375px screen, so it
   drops to 14px here and every block on the page gains 20px of usable width.
   The TOKEN is untouched: --space-3 also drives gaps and vertical rhythm
   throughout, and shrinking it would have moved far more than the edges. */
@media (max-width: 767px) {
  .mo-listicle .mo-container { padding-inline: 14px; }
}


/* ------------------------------------------------------ scrollbar pinning --
   theme.liquid sets `scrollbar-width: thin` on the root. Chrome treats a
   non-auto value on the root as opting the WHOLE document out of overlay
   scrollbars, so every scroll container in this section suddenly reserved a
   20px classic scrollbar that the local design never had: the LiveOn sheet
   rendered 355px wide instead of 375px and its ingredient list ran 61px
   taller. Pinning our own scrollers so theme chrome cannot move our layout. */
.mo-listicle, .mo-listicle * { scrollbar-width: none; }
.mo-listicle::-webkit-scrollbar, .mo-listicle *::-webkit-scrollbar { width: 0; height: 0; }

/* Media in a reason slot is inline-level by default, so it sits on a text
   baseline and its container picks up ~8px of descender gap. The theme's own
   reset kills that gap, the bare preview does not, and the two rendered 8px
   apart. Pinned here so both are the true 4:3 with no phantom strip. */
.mo-listicle .r-media > img, .mo-listicle .r-media > video { display: block; }


/* --------------------------------------------------- mobile heading wrap --
   Five page headings carry inline `text-wrap: balance`. Balance equalises line
   lengths, which is fine on a wide column but throws away width on a phone:
   "You get a nutritionist who answers all your health questions." was filling
   only 66% of 347px, "Developed with more than 30+ doctors" 82%.
   Wrapping normally below 768px lets them use the full measure.
   `!important` because the declarations are inline.
   Deliberately NOT touching .mo-founder-title / .mo-upsell-title / .mo-lo-frame:
   those are short labels where balance is doing a real job, and it is what
   stops the LiveOn card title orphaning "Care" on its own line. */
@media (max-width: 767px) {
  .mo-listicle .mo-h1, .mo-listicle .mo-h2 { text-wrap: wrap !important; }
}

/* ── WhatsApp "consult" button at the end of each section ────────────────── */
.mo-listicle .mo-wa-consult {
  position: relative;                    /* sit above absolute section photos */
  z-index: 1;
  grid-column: 1 / -1;
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 32px);
}
.mo-listicle .mo-wa-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 28px 0 22px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(37, 211, 102, .32), 0 2px 8px rgba(32, 39, 28, .14);
  transition: transform .24s cubic-bezier(0.34, 1.42, 0.50, 1), box-shadow .24s ease;
}
.mo-listicle .mo-wa-cta:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(37, 211, 102, .42), 0 2px 8px rgba(32, 39, 28, .16);
}
.mo-listicle .mo-wa-cta:active { transform: translateY(0) scale(.98); }
.mo-listicle .mo-wa-cta:focus-visible { outline: 3px solid #2d4c26; outline-offset: 3px; }
.mo-listicle .mo-wa-cta-icon { flex: none; display: grid; place-items: center; }
.mo-listicle .mo-wa-cta-icon svg { width: 22px; height: 22px; }
@media (prefers-reduced-motion: reduce) {
  .mo-listicle .mo-wa-cta, .mo-listicle .mo-wa-cta:hover, .mo-listicle .mo-wa-cta:active { transform: none; }
}

/* ══ 11.11 Mix & Match skin ════════════════════════════════════════════════
   Everything below only shows while html.is-1111 is set (25 Oct 00:00 to
   12 Nov 00:00 SGT, or ?sale=1111). Look matches the 11.11 ads: red to
   orange, gold, cream coupon tickets. */
.mo-listicle .mo-s11, .mo-listicle .mo-s11i { display: none; }
html.is-1111 .mo-listicle .mo-ns11 { display: none !important; }
html.is-1111 .mo-listicle .mo-ns11i { display: none; }
html.is-1111 .mo-listicle .mo-s11 { display: block; }
html.is-1111 .mo-listicle .mo-s11i { display: inline; }

/* top bar */
html.is-1111 .mo-listicle .mo-s11bar {
  display: flex; justify-content: center; padding: 11px 14px;
  background: linear-gradient(90deg, #A30F18 0%, #D3141F 45%, #F26A1D 100%);
  color: #fff; text-align: center;
}
.mo-listicle .mo-s11bar-in { display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: center;
  font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.mo-listicle .mo-s11bar-in i, .mo-listicle .mo-s11tick i { font-style: normal; color: #F6C445; }
.mo-listicle [data-s11-cd] { font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .mo-listicle .mo-s11bar-x { display: none; } }

/* hero poster over gallery slide 1 */
html.is-1111 .mo-listicle .mo-s11hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html.is-1111 .mo-listicle .mo-s11hero.is-off { display: none; }
html.is-1111 .mo-listicle .mo-thumb { position: relative; }
html.is-1111 .mo-listicle .mo-s11thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* chip over the title */
html.is-1111 .mo-listicle .mo-s11chip {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 7px 14px; border-radius: 999px;
  background: linear-gradient(90deg, #D3141F, #F26A1D); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(211, 20, 31, .28);
}

/* the deal panel */
html.is-1111 .mo-listicle .mo-s11deal {
  position: relative; margin-top: 6px; padding: 16px 14px 14px; border-radius: 20px;
  border: 2px solid #F6C445;
  background-color: #FFF5E1;
  background-image:
    radial-gradient(circle at 8% 14%, #F6C445 0 3px, transparent 4px),
    radial-gradient(circle at 93% 10%, #D3141F 0 3px, transparent 4px),
    radial-gradient(circle at 70% 22%, #F26A1D 0 2px, transparent 3px),
    radial-gradient(circle at 22% 88%, #D3141F 0 2px, transparent 3px),
    radial-gradient(circle at 96% 82%, #F6C445 0 3px, transparent 4px),
    linear-gradient(160deg, #FFF8EA 0%, #FFE6BC 100%);
  box-shadow: 0 14px 30px rgba(211, 20, 31, .14);
}
.mo-listicle .mo-s11deal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mo-listicle .mo-s11deal-title { font-size: clamp(21px, 2.2vw, 25px); font-weight: 900; line-height: 1; letter-spacing: -.01em;
  text-transform: uppercase; color: #D3141F; }
.mo-listicle .mo-s11deal-cd { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  background: #7A0B12; color: #FFE7A1; font-size: 13px; font-weight: 700; white-space: nowrap; }
.mo-listicle .mo-s11deal-cd b { color: #fff; font-weight: 800; }
.mo-listicle .mo-s11deal-note { margin: 10px 2px 0; font-size: 14px; line-height: 1.4; color: #6B2410; }

/* coupon tickets */
html.is-1111 .mo-listicle .mo-s11tickets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.mo-listicle .mo-s11ticket {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 12px 6px 11px; border-radius: 12px; text-align: center;
  background: #fff; border: 2px dashed #D3141F; color: #D3141F;
}
.mo-listicle .mo-s11ticket::before, .mo-listicle .mo-s11ticket::after {
  content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: #FFEFD2; border: 2px solid #D3141F;
}
.mo-listicle .mo-s11ticket::before { left: -8px; clip-path: inset(0 0 0 50%); }
.mo-listicle .mo-s11ticket::after { right: -8px; clip-path: inset(0 50% 0 0); }
.mo-listicle .mo-s11ticket small { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #20271c; }
.mo-listicle .mo-s11ticket b { font-size: clamp(17px, 1.9vw, 21px); font-weight: 900; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; }
.mo-listicle .mo-s11ticket.is-best { background: linear-gradient(160deg, #E0201F, #A30F18); border: 2px solid #F6C445; color: #fff; }
.mo-listicle .mo-s11ticket.is-best small { color: #FFE7A1; }
.mo-listicle .mo-s11ticket.is-best::before, .mo-listicle .mo-s11ticket.is-best::after { border-color: #F6C445; }
.mo-listicle .mo-s11ticket em {
  position: absolute; top: -11px; right: -6px; padding: 3px 8px; border-radius: 999px;
  background: #F6C445; color: #7A0B12; font-style: normal; font-size: 10.5px; font-weight: 900;
  letter-spacing: .05em; text-transform: uppercase; transform: rotate(5deg);
  box-shadow: 0 4px 10px rgba(122, 11, 18, .25);
}

/* pack cards and buttons go 11.11 red */
html.is-1111 .mo-listicle [data-b-now] { color: #D3141F !important; }
html.is-1111 .mo-listicle [data-b-save] { background: #D3141F !important; color: #fff !important; }
html.is-1111 .mo-listicle [data-sticky-price] { color: #D3141F !important; }
html.is-1111 .mo-listicle [data-add-to-cart].mo-hov-cta, html.is-1111 .mo-listicle [data-add-to-cart].mo-btn--primary {
  background: linear-gradient(135deg, #E0201F 0%, #A30F18 100%) !important;
  box-shadow: 0 12px 26px rgba(211, 20, 31, .32) !important;
}

/* sale ticker between sections (tilted and wider than the page, so the
   page clips sideways overflow while the sale is on; clip keeps sticky) */
html.is-1111 .mo-listicle { overflow-x: clip; }
html.is-1111 .mo-listicle .mo-s11tick {
  overflow: hidden; padding: 13px 0;
  background: linear-gradient(90deg, #A30F18 0%, #D3141F 50%, #F26A1D 100%);
  color: #fff; transform: rotate(-1deg); margin: 6px -2%; width: 104%;
  box-shadow: 0 10px 24px rgba(211, 20, 31, .22);
}
.mo-listicle .mo-s11tick-track { display: flex; gap: 22px; width: max-content; align-items: center;
  font-size: clamp(15px, 1.6vw, 18px); font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; animation: moS11Tick 34s linear infinite; }
.mo-listicle .mo-s11tick-track span { flex: none; }
@keyframes moS11Tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* closing band */
html.is-1111 .mo-listicle .mo-s11band-ov {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% -10%, rgba(246, 196, 69, .45), transparent 55%),
    linear-gradient(165deg, rgba(224, 32, 31, .94) 0%, rgba(140, 10, 18, .96) 100%);
}
html.is-1111 .mo-listicle .mo-s11band-seal {
  font-size: clamp(64px, 11vw, 120px); font-weight: 900; line-height: .9; letter-spacing: -.03em;
  background: linear-gradient(180deg, #FFF1C2 0%, #F6C445 55%, #C98B13 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(90, 6, 12, .45));
}
html.is-1111 .mo-listicle .mo-s11band-h { margin: 0; font-size: clamp(30px, 5.4vw, 56px); line-height: 1.02; letter-spacing: -.015em;
  font-weight: 900; color: #fff; text-wrap: balance; }
html.is-1111 .mo-listicle .mo-s11tickets--band { width: 100%; max-width: 560px; margin-top: 4px; }
.mo-listicle .mo-s11tickets--band .mo-s11ticket::before, .mo-listicle .mo-s11tickets--band .mo-s11ticket::after { background: #B8121B; }
html.is-1111 .mo-listicle .mo-s11band-p { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.5; color: #FFE9D0; }
html.is-1111 .mo-listicle #checkout .mo-hov-cta, html.is-1111 .mo-listicle .mo-s11band-cta {
  background: linear-gradient(135deg, #FFE08A 0%, #F6C445 100%) !important; color: #7A0B12 !important;
  box-shadow: 0 14px 30px rgba(90, 6, 12, .35) !important;
}
html.is-1111 .mo-listicle #checkout .mo-hov-cta svg path { stroke: #7A0B12; }

@media (prefers-reduced-motion: reduce) { .mo-listicle .mo-s11tick-track { animation: none; } }

/* 11.11: listicle-only pieces (the hero poster, every primary button, the band) */
html.is-1111 .mo-listicle .mo-s11hero { z-index: 2; border-radius: var(--radius-card); }
html.is-1111 .mo-listicle .mo-hero-media [data-hero-track] { position: relative; }
html.is-1111 .mo-listicle .mo-btn--primary {
  background: linear-gradient(135deg, #E0201F 0%, #A30F18 100%) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 10px 22px rgba(211, 20, 31, .28) !important;
}
html.is-1111 .mo-listicle .mo-s11chip { margin-bottom: -4px; }
html.is-1111 .mo-listicle .mo-s11bandsec { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 88px) 16px; text-align: center; }
.mo-listicle .mo-s11bandsec-in { position: relative; z-index: 1; max-width: 860px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 18px; }
html.is-1111 .mo-listicle .mo-s11tickets--band { margin-inline: auto; }
html.is-1111 .mo-listicle .mo-s11band-cta { display: inline-flex; margin-top: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }

/* 11.11: normal bundle price struck beside the sale price, and the extra */
.mo-listicle .mo-s11was { color: #8d8c7f; font-weight: 500; text-decoration-thickness: 1.5px; }
.mo-listicle [data-cta-price] .mo-s11was { color: rgba(255, 255, 255, .72); font-weight: 600; margin-right: 2px; }
.mo-listicle .mo-s11extra { display: inline-block; margin-left: 4px; padding: 2px 8px; border-radius: 999px;
  background: #FFE7A1; color: #A30F18; font-size: 11.5px; font-weight: 800; letter-spacing: .02em;
  white-space: nowrap; vertical-align: 1px; }

/* ══ Mix & Match buy box (?offer=mix) ══════════════════════════════════════ */
.mo-listicle .mo-mix { display: none; }
html.is-mix .mo-listicle .mo-mix { display: flex; flex-direction: column; gap: 12px; }
html.is-mix .mo-listicle .mo-nmix { display: none !important; }
.mo-listicle .mo-mix-intro { margin: 2px 0 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.45; color: var(--color-text-2); }
.mo-listicle .mo-mix-tiers { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.mo-listicle .mo-mix-tiers [hidden] { display: none !important; }
.mo-listicle .mo-mix-more { align-self: center; margin: 2px 0; padding: 6px 10px; border: 0; background: none;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--color-brand);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html.is-1111 .mo-listicle .mo-mix-more { color: #A30F18; }

.mo-listicle .mo-mix-split { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px;
  background: #F4F6F1; border: 1.5px solid #cfdcc6; }
html.is-1111 .mo-listicle .mo-mix-split { background: #FFF5E1; border-color: #F6C445; }
.mo-listicle .mo-mix-split-h { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--color-text); }
.mo-listicle .mo-mix-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: #fff; }
.mo-listicle .mo-mix-row img { flex: none; width: 48px; height: 48px; border-radius: 10px; object-fit: cover; background: #f4f4f2; }
.mo-listicle .mo-mix-prod { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; font-family: var(--font-sans); }
.mo-listicle .mo-mix-prod b { font-size: 16px; font-weight: 700; color: var(--color-text); }
.mo-listicle .mo-mix-prod small { font-size: 13px; color: var(--color-text-2); }
.mo-listicle .mo-mix-step { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px;
  border: 1px solid var(--color-border); border-radius: 999px; }
.mo-listicle .mo-mix-step button { width: 36px; height: 36px; border: 0; border-radius: 999px; background: #F1F6EE;
  color: var(--color-brand); font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.mo-listicle .mo-mix-step button:disabled { opacity: .35; cursor: default; }
.mo-listicle .mo-mix-step b { min-width: 28px; text-align: center; font-family: var(--font-sans); font-size: 17px;
  font-weight: 800; color: var(--color-text); font-variant-numeric: tabular-nums; }
html.is-1111 .mo-listicle .mo-mix-step button { background: #FFE7A1; color: #A30F18; }

.mo-listicle .mo-mix-info { align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--mo-mix-link, #2d4c26); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
html.is-1111 .mo-listicle .mo-mix-info { color: #A30F18; }


/* ===================================================================
   11.11 ADD-TO-CART DRESS-UP (2026-10-25). Sale window only (html.is-1111),
   so it switches off with the rest of the sale layer after 11 Nov.
   Crimson-to-orange like the top bar, gold foil edge, a gold
   "11.11 MEGA SALE" ticket on the corner, two sparkles and a light glint.
   background-image/size/repeat carry !important to beat the inline
   gradient; the glint moves through --mo11-gx, since an older sale rule pins the
   background shorthand (and so background-position) with !important.
   =================================================================== */
@property --mo11-gx { syntax: '<percentage>'; inherits: false; initial-value: -170%; }
@keyframes mo11-glint { 0%, 60% { --mo11-gx: -170%; } 100% { --mo11-gx: 270%; } }
@keyframes mo11-twinkle { 0%, 100% { opacity: .55; transform: scale(.85) rotate(0deg); } 50% { opacity: 1; transform: scale(1.12) rotate(18deg); } }
html.is-1111 .mo-listicle [data-offer] [data-add-to-cart], html.is-1111 .mo-listicle .mo-stickycta {
  position: relative;
  background-image:
    linear-gradient(105deg, transparent 36%, rgba(255,255,255,.45) 50%, transparent 64%),
    linear-gradient(100deg, #A80E19 0%, #E0201F 42%, #FF4E1F 80%, #FF7A1A 100%) !important;
  background-size: 55% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--mo11-gx, -170%) 0, 0 0 !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 2px #F6C445, inset 0 -3px 0 rgba(122,11,18,.28), 0 12px 26px rgba(211,20,31,.34) !important;
  text-shadow: 0 1px 0 rgba(122,11,18,.4);
  font-weight: 800 !important;
  animation: mo11-glint 3.8s ease-in-out infinite;
}
html.is-1111 .mo-listicle [data-offer] [data-add-to-cart] { margin-top: 22px !important; overflow: visible; }
html.is-1111 .mo-listicle [data-offer] [data-add-to-cart] [data-cta-price] s { color: rgba(255,255,255,.72); font-weight: 600; }
html.is-1111 .mo-listicle [data-offer] [data-add-to-cart]::before {
  content: "11.11 MEGA SALE";
  position: absolute; top: -12px; left: 20px; z-index: 1;
  padding: 5px 10px 4px; border-radius: 6px;
  background: linear-gradient(135deg, #FFF1BF 0%, #F6C445 45%, #D3921B 100%);
  color: #7A0B12; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; line-height: 1;
  box-shadow: 0 3px 8px rgba(90,6,12,.3), inset 0 0 0 1px rgba(255,255,255,.55);
  transform: rotate(-4deg); text-shadow: none; white-space: nowrap; pointer-events: none;
}
html.is-1111 .mo-listicle [data-offer] [data-add-to-cart]::after {
  content: "\2726  \2726";
  position: absolute; top: -10px; right: 24px; z-index: 1;
  color: #F6C445; font-size: 15px; line-height: 1; letter-spacing: -.1em; white-space: pre;
  text-shadow: 0 0 6px rgba(255,200,60,.9); pointer-events: none;
  animation: mo11-twinkle 1.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  html.is-1111 .mo-listicle [data-offer] [data-add-to-cart], html.is-1111 .mo-listicle .mo-stickycta, html.is-1111 .mo-listicle [data-offer] [data-add-to-cart]::after { animation: none; }
}


/* ===================================================================
   11.11 CART SLIDE-OUT (2026-10-25). Sale window only (html.is-1111).
   Red-to-orange header with a gold 11.11 seal, a coupon-ticket strip
   with the live countdown ([data-s11-cd] is filled by the countdown
   script at the end of the page JS), the saving in red on gold, and
   the checkout button in the same dress as the add-to-cart button
   (reuses mo11-glint / --mo11-gx from the block above).
   =================================================================== */
.mo-cart .mo-s11cart, .mo-cart .mo-s11cart-seal { display: none; }
html.is-1111 .mo-cart .mo-cart-head {
  position: relative; overflow: hidden;
  background: linear-gradient(100deg, #A80E19 0%, #E0201F 45%, #FF4E1F 85%, #FF7A1A 100%) !important;
  border-bottom: 2px solid #F6C445 !important;
}
html.is-1111 .mo-cart .mo-cart-head > span:first-child { color: #fff !important; display: inline-flex; align-items: center; }
html.is-1111 .mo-cart .mo-cart-head [data-cart-close] { color: #fff !important; position: relative; z-index: 1; }
html.is-1111 .mo-cart .mo-cart-head::after {
  content: "\2726     \2726  \2726"; white-space: pre;
  position: absolute; top: 50%; right: 64px; transform: translateY(-50%);
  color: rgba(255,224,138,.55); font-size: 13px; letter-spacing: .1em; pointer-events: none;
}
html.is-1111 .mo-cart .mo-s11cart-seal {
  display: inline-block; margin-left: 10px; padding: 4px 8px 3px; border-radius: 6px;
  background: linear-gradient(135deg, #FFF1BF 0%, #F6C445 45%, #D3921B 100%);
  color: #7A0B12; font-size: 12px; font-weight: 800; letter-spacing: .06em; line-height: 1;
  box-shadow: 0 2px 6px rgba(90,6,12,.35), inset 0 0 0 1px rgba(255,255,255,.55);
  transform: rotate(-5deg);
}
html.is-1111 .mo-cart .mo-s11cart {
  display: flex !important; flex: none; align-items: center; justify-content: space-between; gap: 12px;
  position: relative; margin: 14px 20px 2px; padding: 10px 16px;
  border-radius: 12px; border: 1.5px dashed #D99A1E;
  background: linear-gradient(135deg, #FFF8E4 0%, #FFE9B6 100%);
}
html.is-1111 .mo-cart .mo-s11cart::before, html.is-1111 .mo-cart .mo-s11cart::after {
  content: ""; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-radius: 50%; background: #fff; border: 1.5px dashed #D99A1E;
}
html.is-1111 .mo-cart .mo-s11cart::before { left: -8px; clip-path: inset(0 0 0 50%); }
html.is-1111 .mo-cart .mo-s11cart::after { right: -8px; clip-path: inset(0 50% 0 0); }
html.is-1111 .mo-cart .mo-s11cart-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html.is-1111 .mo-cart .mo-s11cart-l b { font-size: 14px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #C8102E; }
html.is-1111 .mo-cart .mo-s11cart-l small { font-size: 12.5px; line-height: 1.3; color: #7A0B12; }
html.is-1111 .mo-cart .mo-s11cart-cd {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-size: 11px; font-weight: 600; color: #7A0B12; text-transform: uppercase; letter-spacing: .06em;
}
html.is-1111 .mo-cart .mo-s11cart-cd b {
  padding: 3px 8px; border-radius: 6px; background: #C8102E; color: #fff;
  font-size: 13.5px; font-weight: 800; letter-spacing: .02em; text-transform: none;
  font-variant-numeric: tabular-nums;
}
html.is-1111 .mo-cart [data-cart-saving] {
  padding: 3px 10px; border-radius: 999px; background: #FFEDB8;
  color: #C8102E !important; font-weight: 800 !important;
}
html.is-1111 .mo-cart [data-cart-total], html.is-1111 .mo-cart-panel [data-cart-subtotal] { color: #C8102E !important; }
html.is-1111 .mo-cart [data-checkout] {
  position: relative;
  background-image:
    linear-gradient(105deg, transparent 36%, rgba(255,255,255,.45) 50%, transparent 64%),
    linear-gradient(100deg, #A80E19 0%, #E0201F 42%, #FF4E1F 80%, #FF7A1A 100%) !important;
  background-size: 55% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--mo11-gx, -170%) 0, 0 0 !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: inset 0 0 0 2px #F6C445, inset 0 -3px 0 rgba(122,11,18,.28), 0 12px 26px rgba(211,20,31,.34) !important;
  text-shadow: 0 1px 0 rgba(122,11,18,.4); font-weight: 800 !important;
  animation: mo11-glint 3.8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { html.is-1111 .mo-cart [data-checkout] { animation: none; } }

/* Compact cart slide-out (2026-10-25). Brandon wanted it tidier, not smaller: readable sizes,
   tighter spacing. Sizes in the drawer markup were set to match; these cover what the JS draws
   and the 11.11 strip. */
.mo-cart [data-cart-perks] > span { font-size: 14.5px !important; line-height: 1.4 !important; gap: 8px !important; }
.mo-cart [data-cart-perks] svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
html.is-1111 .mo-cart .mo-s11cart { margin: 12px 16px 0; padding: 9px 14px; border-radius: 12px; }
html.is-1111 .mo-cart .mo-s11cart-l b { font-size: 13.5px; }
html.is-1111 .mo-cart .mo-s11cart-l small { font-size: 12.5px; }
html.is-1111 .mo-cart .mo-s11cart-cd { font-size: 10.5px; }
html.is-1111 .mo-cart .mo-s11cart-cd b { font-size: 13.5px; padding: 3px 8px; }
html.is-1111 .mo-cart .mo-s11cart-seal { font-size: 12px; margin-left: 10px; }
html.is-1111 .mo-cart [data-cart-saving] { padding: 2px 9px; }