/*
Theme Name: Astra Child - FloBites
Description: Custom Figma Redesign for FloBites
Author: Pracheth
Template: astra
Version: 1.0.0
*/


@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lora:wght@300;400;600&family=Manrope:wght@500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Fredoka:wght@400;600&family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap');

html,
body {
  overflow-x: hidden;
  width: 100%;
  background-color: #fdfbf5 !important;
}

@font-face {
    font-family: 'Arlette Heavy';
    src: url("https://staging.thehormoneessentials.com/wp-content/fonts/arlette-heavy.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* ==============================
   DESIGN TOKENS
============================== */
:root {
  /* Colors */
  --flo-bg-hero: #f9dbd0;
  --flo-bg-dark: #3a1808;
  --flo-accent: #fa3558; /* This is the bright pink */
  --flo-accent-border: #e43255;
  --flo-accent-tint: #fff4f5;
  --flo-text-dark: #1c1c1c;
  --flo-text-body: #474747;
  --flo-btn-text-light: #fde8e7;

  /* Typography */
  --flo-font-display: "Fredoka One", cursive;
  --flo-font-serif: "Lora", serif;
  --flo-font-sans: "Manrope", sans-serif;

  /* Scale */
  --flo-heading-size: 52px;
  --flo-heading-lh: 83px;
  --flo-body-size: 18px;
  --flo-body-lh: 28px;
  --flo-btn-size: 20px;
}

body {
  overflow-x: hidden;
}

/* ==============================
   OVERFLOW NUKE (Required for overlap)
============================== */
#content,
#primary,
.site-main,
.ast-container,
.flobites-v2-wrapper {
  overflow: visible !important;
}

/* ==============================
   ISOLATION WRAPPER
============================== */
.flobites-v2-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #fdfbf5;
}

/* ==============================
   GLOBAL HEADER (WHITE & FULL WIDTH)
============================== */
.site-header,
#masthead,
.ast-main-header-wrap,
.main-header-bar {
  background-color: #fdfbf5 !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.site-header .custom-logo,
header .custom-logo {
  max-width: 140px;
  height: auto;
  display: block;
}

/* Allow every Astra wrapper inside the header bar to expand */
.main-header-bar-navigation,
.main-navigation,
.ast-main-navigation,
.ast-builder-menu {
  flex-grow: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* Pass-through: the inner list container must not collapse */
.main-header-menu-list {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

/* ==============================
   THE WRAPPER ANNIHILATOR (Restored)
   Forces all Astra & EHF parents to 100% width
============================== */
html,
body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* Strip all restrictions from hidden Astra/Elementor wrappers */
#page,
#content,
.site-content,
.ast-container,
.ast-separate-container,
#primary,
#main,
.elementor-section-wrap,
.elementor-section,
.elementor-container,
.ehf-template-astra {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Ensure our custom wrapper spans the newly opened gap */
.flobites-v2-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background-color: transparent !important;
}

/* ==============================
   HERO SECTION
============================== */
.flobites-v2-wrapper .hero {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  overflow: visible !important;
  background-color: #f9dbd0;
  min-height: 1350px;
  padding: 180px 58px 150px 58px;
  position: relative !important;
}

.flobites-v2-wrapper .hero__content {
  flex: 1;
  max-width: 50%;
  z-index: 20;
  
  /* FIXED: Removed the extreme -400px margin that was dragging text into the navbar */
  margin-top: -600px; 
  padding: 0;
}

.flobites-v2-wrapper .hero__heading,
.flobites-v2-wrapper .hero__heading * {
  font-family: "Fredoka One", "Fredoka", cursive !important;
  margin-top: 0 ; /* Resetting negative margin here */
  font-size: var(--flo-heading-size, 52px);
  line-height: var(--flo-heading-lh, 1.1);
  color: var(--flo-text-dark, #1c1c1c);
  text-transform: capitalize !important;
}

/* Exception for the pink highlight word */
.flobites-v2-wrapper .hero__heading .hero__highlight {
  color: var(--flo-accent, #ff4b6b) !important;
  text-transform: none !important;
}

.flobites-v2-wrapper .hero__heading .hero__heading_new {
  font-family: "Lora", serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
}

.flobites-v2-wrapper .hero__heading .lower {
  text-transform: lowercase !important;
}

.flobites-v2-wrapper .hero__word--fredoka {
  font-family: var(--flo-font-display);
  font-weight: 400;
}
.flobites-v2-wrapper .hero__word--lora {
  font-family: var(--flo-font-serif);
  font-weight: 600;
}
.flobites-v2-wrapper .hero__word--accent {
  color: var(--flo-accent);
}

.flobites-v2-wrapper .hero__subtext {
  margin: 0;
  font-family: var(--flo-font-sans);
  font-weight: 500;
  margin-bottom: 30px;
  margin-top: 30px;
  font-size: var(--flo-body-size);
  line-height: var(--flo-body-lh);
  color: var(--flo-text-body);
  max-width: 512px;
}

.flobites-v2-wrapper .hero-product-image {
  position: absolute !important;
  top: -200px !important;
  bottom: auto !important;
  right: -130px !important;
  left: auto !important;
  width: 2200px !important;
  min-width: 1550px !important;
  max-width: none !important;
  height: auto !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

/* ==============================
   HERO BUTTONS
============================== */
.flobites-v2-wrapper .hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.flobites-v2-wrapper .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 177px;
  padding: 8px 36px;
  border-radius: 20px;
  font-weight: 300;
  background-color: var(--flo-accent);
  color: var(--flo-btn-text-light);
  text-decoration: none;
  border: none;
}

.flobites-v2-wrapper .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 177px;
  padding: 8px 36px;
  border-radius: 20px;
  font-weight: 600;
  background-color: var(--flo-accent-tint);
  color: var(--flo-text-dark);
  border: 1px solid var(--flo-accent-border);
  text-decoration: none;
}

/* ==============================
   HERO MOBILE
============================== */
@media (max-width: 768px) {

  .flobites-v2-wrapper .hero {
    min-height: 1150px; 
    padding: 130px 24px 60px; 
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
  }

  .flobites-v2-wrapper .hero__content {
    max-width: 100%;
    width: 100%;
    margin-top: 100px;
    text-align: center;
    z-index: 20;
  }

  /* HEADING */
  .flobites-v2-wrapper .hero__heading,
  .flobites-v2-wrapper .hero__heading * {
    font-size: 40px !important;
    line-height: 1.08 !important;
    margin-top: 0 !important;
    text-align: center;
  }

  /* SUBTEXT */
  .flobites-v2-wrapper .hero__subtext {
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
    margin: 26px auto 34px auto;
    text-align: center;
  }

  /* BUTTONS */
  .flobites-v2-wrapper .hero__actions {
    flex-direction: column;
    gap: 16px;
    width: 100%;
    align-items: center;
    margin-bottom: 40px; 
  }

  .flobites-v2-wrapper .btn-primary,
  .flobites-v2-wrapper .btn-secondary {
    width: 260px;
    height: 45px;
    border-radius: 28px;
    font-size: 18px;
    justify-content: center;
  }

  .flobites-v2-wrapper .btn-primary {
    font-weight: 500;
    margin-top: 5px;
    margin-bottom: 0px;
  }

  .flobites-v2-wrapper .btn-secondary {
    font-weight: 500;
  }


  /* PRODUCT IMAGE FIXES */
  .flobites-v2-wrapper .hero-product-image {
    position: absolute !important;
    top: 410px !important;
    bottom: auto !important;
    
    /* Center it normally... */
    left: 65% !important; 
    right: auto !important;
    
    /* ...but offset it further left (-70% instead of -50%) to hide the PNG's transparent 'tail' */
    transform: translateX(-70%) !important; 
    
    /* Reduced width */
    width: 600px !important; /* <--- CHANGE THIS VALUE HERE */
    
    /* These force the image to actually resize */
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important; 
  }


}

/* ==============================
   PROBLEM SECTION (Pink Cut-Off Layer)
============================== */
.flobites-v2-wrapper .problem-section {
  position: relative !important;
  z-index: 99;
  background-color: var(--flo-accent, #ff4b6b);
  padding: 20px 28px; 
  min-height: 120px;
  margin-top: -600px; 
}

/* ==============================
   PRIMARY NAV LIST
============================== */
.flobites-nav-list {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 32px !important;
  width: 100% !important;
}

.flobites-nav-list .menu-item > a {
  font-family: var(--flo-font-sans, sans-serif);
  font-weight: 500;
  font-size: 16px;
  color: var(--flo-text-dark, #1c1c1c);
  text-decoration: none;
  white-space: nowrap;
}

.flobites-nav-list .menu-item > a:hover {
  color: var(--flo-accent, #fa3558);
}

/* ==============================
   FAR-RIGHT CTA GROUP
   margin-left: auto on the shop item absorbs all remaining space,
   pushing it (and the adjacent cart item) flush to the right edge.
============================== */
.flobites-shop-btn-item {
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
}

.flobites-shop-btn {
  background-color: var(--flo-accent, #fa3558) !important;
  color: #fff !important;
  padding: 10px 24px !important;
  border-radius: 6px !important;
  font-family: var(--flo-font-sans, sans-serif) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.flobites-shop-btn:hover {
  opacity: 0.88;
}

.flobites-custom-menu-cart {
  display: flex !important;
  align-items: center !important;
}

.flobites-custom-menu-cart img {
  max-width: 32px !important;
  height: auto !important;
  display: block !important;
}

/* ==============================
   CLEANUP: HIDE NATIVE ASTRA ELEMENTS
============================== */
.ast-site-header-cart-wrap,
.ast-site-header-cart,
.ast-woo-header-cart-info-wrap,
.ast-header-break-point .main-header-menu {
  display: none !important;
}

/* ==============================
   PROBLEM SECTION - 3 COLUMN LAYOUT
============================== */
.problem-section-inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px; 
  max-width: 1200px;
  margin: 0 auto; 
  text-align: center;
}

.problem-card {
  flex: 1; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.problem-card img {
  width: 90% !important;
  /* CHANGED: Dropped from 180px to 120px to make them much smaller */
  max-width: 120px !important; 
  height: auto !important;
  margin: 0 auto 10px auto !important;
  object-fit: contain;
}

.problem-heading {
  font-family: var(--flo-font-display, "Fredoka One", cursive) !important;
  font-size: 20px !important;
  text-transform: capitalize !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  margin: 0 0 12px 0 !important;
  color: #ffffff !important;
}

.problem-text {
  font-family: var(--flo-font-sans, "Manrope", sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important; 
  margin: 0 auto !important;
  color: #ffffff !important;
  max-width: 340px !important; 
}

/* ==============================
   MOBILE - PROBLEM SECTION
============================== */
@media (max-width: 768px) {
  .flobites-v2-wrapper .problem-section {
    margin-top: -470px !important; 
    padding: 50px 24px 70px;
    overflow: hidden;
  }

  .problem-section-inner {
    display: flex;
    flex-direction: column;
    gap: 50px;
    max-width: 100%;
  }

  /* CARD */
  .problem-card {
    width: 100%;
    display: grid;
    /* CHANGED: Adjusted the grid column width to match the smaller image */
    grid-template-columns: 85px 1fr; 
    align-items: center;
    column-gap: 20px;
    text-align: left;
    margin: 0;
  }

  .problem-card img {
    /* CHANGED: Dropped from 110px to 85px for mobile */
    max-width: 85px !important; 
    margin: 0 !important;
  }

  .problem-heading {
    font-size: 20px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }

  .problem-text {
    font-size: 14px !important;
    line-height: 1.35 !important;
    max-width: 100% !important;
  }

  .problem-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* =========================
     ALTERNATING LAYOUT
  ========================= */
  .problem-card:nth-child(1) { 
      grid-template-columns: 85px 1fr;
      text-align: right;
      
  }
  
  .problem-card:nth-child(2) { grid-template-columns: 1fr 85px; }
  .problem-card:nth-child(2) img { order: 2; }
  .problem-card:nth-child(2) .problem-content { order: 1; text-align: left; }
  
  .problem-card:nth-child(3) { 
      grid-template-columns: 85px 1fr; 
      text-align: right;
  }
}


/* ==============================
   SIMPLE NUTRITION SECTION
============================== */
.simple-nutrition-section {
  background-color: #FDFBF5; /* Matching Nav Bar color */
  padding: 100px 58px;
  width: 100%;
  position: relative;
  z-index: 20;
}

.simple-nutrition-container {
  display: flex;
  align-items: center; /* Vertically center content against the image */
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
}

.nutrition-image-col {
  flex: 1;
  display: flex;
  justify-content: flex-start;
}

.nutrition-content-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 500px; /* Constrain text width for readability */
}

.nutrition-img {
  max-width: 70%;
  width: 70%;
  height: 70%;
  display: block;
  border-radius: 32px; /* Replicating the distinct rounded corners from the reference */
  object-fit: cover;
}

.nutrition-heading {
  font-family: var(--flo-font-display, "Fredoka One", cursive);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--flo-text-dark, #1c1c1c);
  margin: 0;
  text-transform: none;
}

.flo-accent-span {
  color: var(--flo-accent, #fa3558);
}

.nutrition-paragraph {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--flo-text-body, #474747);
  margin: 0;
}

.nutrition-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--flo-accent, #fa3558);
  color: #fff !important;
  padding: 10px 40px;
  border-radius: 20px;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition: opacity 0.2s;
  margin-bottom: 8px; /* Slight gap before the text link */
}

.nutrition-primary-btn:hover {
  opacity: 0.88;
}

.nutrition-secondary-link {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 14px;
  margin-left: 16px;
  margin-top: -8px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--flo-text-dark, #1c1c1c);
  text-decoration: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nutrition-secondary-link:hover {
  color: var(--flo-accent, #fa3558);
}

/* ==============================
   MOBILE RESPONSIVE
============================== */
@media (max-width: 900px) {

  .simple-nutrition-section {
    padding: 70px 28px !important;
  }

  .simple-nutrition-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 42px !important;
  }

  /* Image */
  .nutrition-image-col {
    justify-content: center !important;
    width: 100%;
  }

  .nutrition-img {
    width: 100%;
    max-width: 210px !important; /* similar to reference */
    border-radius: 32px !important;
  }

  /* Content Column */
  .nutrition-content-col {
    align-items: center !important;
    max-width: 100% !important;
    gap: 20px !important;
  }

  /* Heading */
  .nutrition-heading {
    font-size: 28px !important;
    line-height: 1.15 !important;
    text-align: center !important;
    max-width: 320px;
  }

  /* Paragraph */
  .nutrition-paragraph {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    max-width: 330px;
    color: #5c5c5c;
  }

  /* CTA Button */
  .nutrition-primary-btn {
    padding: 8px 42px !important;
    border-radius: 999px !important;
    font-size: 20px !important;
    min-width: 210px;
    margin-top: 8px;
    margin-bottom: 0 !important;
  }

  /* Explore link */
  .nutrition-secondary-link {
    margin: 0 !important;
    margin-top: -5px;
    justify-content: center !important;
    font-size: 13px !important;
    letter-spacing: 0.08em;
    gap: 8px;
  }
}

/* ==============================
   SUPER SEEDS FORMULA SECTION
============================== */
.super-seeds-section {
  background-color: #fdfbf5;
  padding: 40px 58px 120px 58px;
  width: 100%;
  position: relative;
  z-index: 10; /* Lowered so it sits behind the wrapper */
}

.super-seeds-container {
  max-width: 1200px;
  margin: 0 auto;
}

.super-seeds-main-heading {
  font-family: var(--flo-font-display, "Fredoka One", cursive);
  font-size: 36px;
  color: #2c3329;
  text-transform: capitalize !important;
  text-align: center;
  margin: 0 0 60px 0;
}

 .super-seeds-main-heading .super_seed_colour{
    color: #485D30;
 }
.seeds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  align-items: end;
}


/* ==============================
   SUPER SEEDS - ANNOTATED GRAPHICS
============================== */
.seed-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
}

.seed-card:nth-child(even) {
  transform: translateY(-30px);
}

.seed-card:nth-child(odd) {
  transform: translateY(30px);
}

/* Maintain the zig-zag translation while adding the scale */
.seed-card:nth-child(even):hover {
  transform: translateY(-30px) scale(1.05);
}

.seed-card:nth-child(odd):hover {
  transform: translateY(30px) scale(1.05);
}

.seed-graphic-wrapper {
  position: relative;
  width: 100%;
  max-width: 200px;
  margin: 60px auto 30px auto; 
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


.floating-benefit {
  position: absolute;
  font-family: var(--flo-font-sans, "Manrope", sans-serif) !important;
  font-size: 11px !important; 
  color: #555555 !important;
  line-height: 1.3 !important;
  z-index: 10;
  width: max-content;
  text-align: center !important; 
}

/* Push text higher up to sit ABOVE the lines */
.flax-card .benefit-left { top: -9%; left: -2%; }
.flax-card .benefit-right { top: -17%; right: 12%; }

.pumpkin-card .benefit-left { top: -5%; left: 13%; }
.pumpkin-card .benefit-right { top: -20%; right: 10%; }

.sunflower-card .benefit-left { top: -10%; left: 10%; }
.sunflower-card .benefit-right { top: -15%; right: 5%; }

/* Sesame (Manual Construction with Strict Line Height) */
.sesame-card .seed-graphic-wrapper {
  padding-top: 60px; 
}
.sesame-card .sesame-img {
  width: 85%; 
  margin: 0 auto;
}

.drawn-line {
  position: absolute !important;
  z-index: 1 !important;
  height: 60px !important; 
  width: auto !important;
}

.sesame-card .line-left { top: 15px; left: 25%; }
.sesame-card .line-right { top: 14px; right: 27%; }
.sesame-card .benefit-left { top: -20px; left: 10%; }
.sesame-card .benefit-right { top: -25px; right: 10%; }

.seed-benefits {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 80px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.seed-benefits span {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 13px;
  color: #555;
  line-height: 1.3;
  position: relative;
  padding-left: 12px;
}

.seed-benefits span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #aaa;
}

.seed-img {
  width: 90%;
  max-width: 180px;
  height: auto;
  margin-bottom: 24px;
  align-self: center;
}

.seed-title {
  font-family: var(--flo-font-serif, "Lora", serif) !important;
  font-size: 20px !important;
  /*font-style: italic;*/
  font-weight: 600 !important;
  color: var(--flo-accent, #fa3558) !important;
  margin: 0 0 12px 0 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.seed-title.sesame {
  color: #713D27 !important;
}

.seed-title.sunflower {
  color: #C85A11 !important;
}


.seed-desc {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 13px;
  font-weight: 500;
  max-width:210px; 
  color: #555;
  line-height: 1.6;
  margin: 0;
}

.seed-desc strong {
  font-weight: 700;
  color: var(--flo-text-dark, #1c1c1c);
}

/* ==============================
   RESPONSIVE GRID
============================== */
@media (max-width: 1024px) {
  .seeds-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 60px;
  }
}

@media (max-width: 600px) {

  .super-seeds-section {
    padding: 40px 14px 50px;
    overflow: hidden;
  }

  .super-seeds-main-heading {
    font-size: 28px;
    line-height: 1.1;
    text-align: center;
    margin: 0 auto 22px;
    max-width: 240px;
  }

  .seeds-grid {
  width: 100%;
  max-width: 402px;
  margin: 0 auto;

  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;

  column-gap: 8px;
  row-gap: 8px;

  align-items: start;
  justify-items: center;
}

  .seed-card,
.seed-card:nth-child(even),
.seed-card:nth-child(odd) {

  width: 100%;
  max-width: 150px;

  transform: none !important; /* Zig Zag disabled on mobile as per existing CSS */

  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

  /* Specific mobile hover override to bypass the !important above */
  .seed-card:hover,
  .seed-card:nth-child(even):hover,
  .seed-card:nth-child(odd):hover {
    transform: scale(1.05) !important;
  }

  .seed-graphic-wrapper {
  width: 60px;
  max-width: 60px;

  margin: 0 auto 2px;

  padding-top: 10px !important;
}

  .seed-img,
  .sesame-card .sesame-img {
    width: 100%;
     max-width: 54px;
    margin: 0 auto;
  }

  .floating-benefit {
    font-size: 4px !important;
    width: 34px !important;
    line-height: 1 !important;
  }

  .sesame-card .line-left { top: 0px; left: 25%; }
  .sesame-card .line-right { top: 0px; right: 27%; }
  .sesame-card .benefit-left { top: -10px; left: -3%; }
  .sesame-card .benefit-right { top: -12px; right: 2%; }
  .flax-card .benefit-left { top: 3%; left: 1%; }
  .flax-card .benefit-right { top: -3%; right: -3%; }

  .pumpkin-card .benefit-left { top: 10%; left: 1%; }
  .pumpkin-card .benefit-right { top: -5%; right: 5%; }

.sunflower-card .benefit-left { top: 4%; left: 3%; }
.sunflower-card .benefit-right { top: -1%; right: -4%; }

  .drawn-line {
    height: 18px !important;
  }

  .seed-title {
    font-size: 13px !important;
    line-height: 1.1;
    margin: 4px 0 !important;
  }

  .seed-desc {
    font-size: 9px;
    line-height: 1.3;
    max-width: 100px;
    margin: 0 auto;
  }

  .seed-benefits {
    display: none;
  }

}

/*from ingredients page */


/* ==============================
   MOBILE RESPONSIVE - SUPER SEEDS
============================== */
@media screen and (max-width: 768px) {

  .super-seeds {
    background: #485d30;
    padding: 48px 16px 55px !important;
    overflow: hidden;
  }

  .seeds-container {
    width: 100%;
    max-width: 360px; /* Standard mobile wrapper */
    margin: 0 auto;
  }

  /* HEADER */
  .seeds-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center !important;
    margin-bottom: 24px;
  }

  .seeds-title {
    font-size: 20px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
    color: #fff;
    text-align: center !important;
  }

  .seeds-title span {
    font-size: 20px !important;
  }

  .seeds-subtitle {
    font-size: 13px !important;
    line-height: 1.45 !important;
    max-width: 300px;
    margin: 0 auto !important;
    text-align: center !important;
    color: #fff;
  }

  /* GRID */
  .super-seeds .seeds-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important; /* Increased gap for better breathing room */
    justify-items: center !important;
    align-items: start !important;
    width: 100%;
    max-width: 340px !important; /* Expanded from 270px to allow wider cards */
    margin: 20px auto 0 !important;
  }

  /* REMOVE ZIG ZAG */
  .super-seeds .seed-card,
  .super-seeds .seed-card:nth-child(even),
  .super-seeds .seed-card:nth-child(odd),
  .super-seeds .seed-card:hover {
    transform: none !important;
  }

  /* CARD WRAPPER */
  .super-seeds .seed-card {
    width: 100% !important; /* Let grid control the width */
    max-width: 160px !important; /* Increased from 110px */
    min-width: unset !important; /* Remove the tight restriction */
    overflow: hidden;
    border-radius: 14px !important;
  }

  /* MAIN CARD */
  .ing-hardcoded-card {
    width: 100% !important;
    height: 220px !important; /* Taller height to fix the squeezed aspect ratio */
    border-radius: 14px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important; /* Essential for absolutely positioned children */
  }

  /* TOP WHITE CURVE */
  .ing-card-top {
    width: 80px !important; /* Scaled up to match wider card */
    height: 80px !important; /* Scaled up */
    margin-left: -10px;
  }

  .ing-card-top .top-shape {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* TITLE */
  .ing-card-top h3 {
    font-size: 14px !important; /* Increased from 8px for readability */
    line-height: 1.15 !important;
    padding: 16px 0 0 14px !important; /* Adjusted padding */
    margin: 0 !important;
    text-align: left !important;
  }

  /* BOTTOM OVERLAY FIX */
  .ing-card-bottom {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 95px !important; /* Taller overlay to fit larger text */
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }

  .ing-card-bottom .bottom-shape {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important; 
    object-fit: cover !important; /* Assuming this is an image acting as a background */
    z-index: 1 !important;
  }

  /* WHITE TEXT */
  .ing-card-bottom p {
    position: relative !important;
    z-index: 5 !important;
    font-size: 9px !important; /* Increased from 7px */
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: #fff !important;
    text-align: center !important;
    padding: 10px 12px 14px !important;
    width: 100% !important; /* Let it stretch fully */
    max-width: 100% !important;
    margin: 0 !important;
    margin-bottom: -10px;
  }

  /* IMAGE (Fallback if <img> is used instead of background-image) */
  .super-seeds .seed-card img:not(.top-shape, .bottom-shape) {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  /* CENTER TEXT - scoped carefully so it doesn't break titles */
  .super-seeds .seed-card span {
    text-align: center !important;
  }
}


/* =======================================
   INGREDIENT PURPOSE SECTION - BASE
======================================= */
.ingredient-purpose-section {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 700px !important;
    padding: 100px 20px 80px 20px !important;
    margin-top: -40px !important;
    margin-bottom: -40px !important;
    z-index: 999 !important;
    overflow: visible !important;
    background-color: transparent !important;
    background-image: url("https://staging.thehormoneessentials.com/wp-content/uploads/2026/05/background-wrapper-scaled.png") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% 100% !important;
}

/* Force Elementor inner containers to be transparent */
.ingredient-purpose-section > div,
.ingredient-purpose-section > .elementor-container,
.ingredient-purpose-section > .e-con,
.ingredient-purpose-section .elementor-widget-wrap,
.ingredient-purpose-section .elementor-background-overlay {
    background-color: transparent !important;
    background-image: none !important;
}

/* --- Typography --- */
.purpose-main-title {
    font-size: 48px !important;
    color: #FFFFFF !important;
    text-align: center;
    margin: 0 0 30px 0 !important; 
    line-height: 1.2 !important;
    text-transform: none !important;
}
.purpose-main-title .font-fredoka-bold {
    font-family: "Fredoka One", "Fredoka", cursive !important;
    font-weight: 400 !important;
}
.purpose-main-title .font-lora-regular {
    font-family: "Lora", serif !important;
    font-style: normal !important; 
    font-weight: 400 !important;
}

/* =======================================
   THE PERFECT CENTER GRID
======================================= */
.purpose-equation-container {
    margin: 0 auto !important; 
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important; /* Forces 3 distinct columns */
    align-items: center !important;
    gap: 40px !important; 
    width: 100% !important;
    max-width: 1300px !important; 
    position: relative !important;
    z-index: 5 !important;
}

.equation-left {
    display: flex !important;
    justify-content: flex-end !important; 
}

.equation-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; 
    gap: 40px !important;
}

/* --- Math Operators --- */
.math-operator {
    font-family: "Fredoka One", "Fredoka", cursive !important;
    font-size: 48px !important; 
    color: #FFFFFF !important;
    font-weight: 400 !important;
    user-select: none;
    z-index: 5;
}
.main-plus {
    margin: 0 !important; 
    transform: translateY(-5px) !important; 
}
.small-plus {
    margin: 5px 0 !important;
    display: block;
    text-align: center;
}

/* =======================================
   LEFT SIDE: CIRCLE & SEEDS
======================================= */
.circle-group {
    position: relative;
    width: 360px !important; 
    height: 360px !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background-color: #FFFFFF !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
    margin-right: 50px !important; /* This pushes the whole circle slightly left, away from the + */
}

.base-circle { display: none !important; }

.circle-center-text {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.text-4 { width: 55px !important; height: auto; } 
.text-super-seeds { width: 130px !important; height: auto; } 

/* Floating Seeds */
.floating-seed-wrapper {
    position: absolute;
    z-index: 20;
    display: inline-block;
    cursor: pointer;
}
.seed-top { top: 0; left: 50%; transform: translate(-50%, -50%); }
.seed-right { top: 50%; right: 0; transform: translate(50%, -50%); }
.seed-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.seed-left { top: 50%; left: 0; transform: translate(-50%, -50%); }

.floating-seed {
    width: 110px !important; 
    height: auto;
    display: block;
    transition: transform 0.3s ease !important;
}
.floating-seed-wrapper:hover .floating-seed { transform: scale(1.15) !important; }

/* Seed Tooltips */
.seed-tooltip {
    position: absolute;
    background-color: #FDFBF5 !important;
    color: #3A1808 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15) !important;
    white-space: nowrap !important;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease !important;
    pointer-events: none;
    z-index: 30;
}
.seed-tooltip::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}
.seed-top .seed-tooltip { bottom: 100%; left: 50%; transform: translate(-50%, 10px); margin-bottom: 5px; }
.seed-top .seed-tooltip::after { top: 100%; left: 50%; transform: translateX(-50%); border-width: 6px 6px 0 6px; border-color: #FDFBF5 transparent transparent transparent; }
.seed-top:hover .seed-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, -5px); }

.seed-right .seed-tooltip { top: 50%; left: 100%; transform: translate(-10px, -50%); margin-left: 5px; }
.seed-right .seed-tooltip::after { top: 50%; right: 100%; transform: translateY(-50%); border-width: 6px 6px 6px 0; border-color: transparent #FDFBF5 transparent transparent; }
.seed-right:hover .seed-tooltip { opacity: 1; visibility: visible; transform: translate(5px, -50%); }

.seed-bottom .seed-tooltip { top: 100%; left: 50%; transform: translate(-50%, -10px); margin-top: 5px; }
.seed-bottom .seed-tooltip::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 0 6px 6px 6px; border-color: transparent transparent #FDFBF5 transparent; }
.seed-bottom:hover .seed-tooltip { opacity: 1; visibility: visible; transform: translate(-50%, 5px); }

.seed-left .seed-tooltip { top: 50%; right: 100%; transform: translate(10px, -50%); margin-right: 5px; }
.seed-left .seed-tooltip::after { top: 50%; left: 100%; transform: translateY(-50%); border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #FDFBF5; }
.seed-left:hover .seed-tooltip { opacity: 1; visibility: visible; transform: translate(-5px, -50%); }


/* =======================================
   RIGHT SIDE: RAGI & CHOCOLATE
======================================= */
.ragi-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.ragi-title-img { max-width: 80px; }

/* CSS Adjusted to make the Ragi image an Oval */
.ragi-main-img {
    width: 220px !important; /* Width is greater than height to make an oval */
    height: 160px !important; 
    object-fit: cover !important;
    border-radius: 50% !important; /* 50% on a non-square element creates an oval naturally */
    flex-shrink: 0 !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.minerals-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 5px;
}
.minerals-grid-row { display: flex; justify-content: center; gap: 20px; width: 100%; }
.mineral-node { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mineral-bubble-img { width: 50px !important; height: 50px !important; object-fit: contain; }
.mineral-node-label {
    font-family: "Manrope", sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #FFFFFF !important;
    text-transform: lowercase !important;
    letter-spacing: 0.5px;
}

.outcome-img {
    max-height: 500px !important; 
    width: auto !important;
    object-fit: contain;
}

/* =======================================
   FOOTER BUTTON
======================================= */
.purpose-action-btn {
    display: inline-block !important;
    background-color: #FFFFFF !important;
    color: #3A1808 !important;
    font-family: "Manrope", sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    padding: 14px 40px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    align-self: center !important;
    margin: 40px auto 20px auto !important; 
    z-index: 10 !important;
}
.purpose-action-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* =======================================
   TABLET + MOBILE RESPONSIVENESS
======================================= */
@media (max-width: 1024px) {

    .ingredient-purpose-section {
        padding: 80px 20px 70px !important;
        overflow: hidden !important;
    }

    /* TITLE */
    .purpose-main-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        text-align: center !important;
        max-width: 340px !important;
        margin: 0 auto 35px auto !important;
    }

    /* STACK MAIN EQUATION */
    .purpose-equation-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 25px !important;
        margin-top: 20px !important; /* NEW */
    }

    /* LEFT SIDE (4 SEEDS) */
    .equation-left {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
    }

    .circle-group {
        width: 250px !important;
        height: 250px !important;
        margin-right: 0 !important;
    }

    .floating-seed {
        width: 75px !important;
    }

    .text-4 {
        width: 45px !important;
    }

    .text-super-seeds {
        width: 110px !important;
    }

    /* MAIN PLUS */
    .main-plus {
        font-size: 38px !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* ---------------------------------
       SECOND HALF STAYS HORIZONTAL
    --------------------------------- */
    .equation-right {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important; /* KEY FIX */
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
    }

    /* RAGI SECTION */
    .ragi-group {
        gap: 10px !important;
        flex-shrink: 0 !important;
    }

    .ragi-title-img {
        max-width: 85px !important;
    }

    /* MAKE IT CIRCLE */
    .ragi-main-img {
        width: 120px !important;
        height: 120px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* SMALL PLUS */
    .small-plus {
        font-size: 28px !important;
        margin: 0 !important;
    }

    /* MINERALS */
    .minerals-container {
        gap: 8px !important;
        margin-top: 0 !important;
    }

    .minerals-grid-row {
        gap: 10px !important;
    }

    .mineral-bubble-img {
        width: 42px !important;
        height: 42px !important;
    }

    .mineral-node-label {
        font-size: 10px !important;
    }

    /* EQUALS */
    .main-equals {
        font-size: 34px !important;
        flex-shrink: 0 !important;
    }

    /* FINAL PRODUCT */
    .outcome-group {
        flex-shrink: 0 !important;
    }

    .outcome-group .outcome-img {
    width: 200px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    transform: translateX(20px) !important;
}

    /* BUTTON */
    .purpose-action-btn {
        margin-top: 35px !important;
        font-size: 15px !important;
        padding: 14px 36px !important;
    }
}


/* EXTRA SMALL MOBILE */
@media (max-width: 480px) {

    .purpose-main-title {
        font-size: 24px !important;
    }

    .circle-group {
        width: 220px !important;
        height: 220px !important;
    }

    .floating-seed {
        width: 65px !important;
    }

    /* Shrink second row */
    .equation-right {
        gap: 8px !important;
    }

    .ragi-main-img {
        width: 95px !important;
        height: 95px !important;
    }

    .mineral-bubble-img {
        width: 36px !important;
        height: 36px !important;
    }

    .outcome-img {
        width: 120px !important;
    }

    .main-plus,
    .main-equals {
        font-size: 28px !important;
    }
}

/* Ensure footer sits behind the overlapping wrapper */
.site-footer {
  position: relative;
  z-index: 10;
}

/* ==============================
   CUSTOM FOOTER (DESKTOP)
============================== */
.site-footer {
  background-color: #f9dbd0;
  padding: 60px 40px 20px 40px; /* Reduced from 60px top, 30px bottom */
  border-radius: 40px 40px 0 0;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- ROW 1: Logo & Menus --- */
.footer-logo-section {
  order: 1;
  width: 25%;
}

.footer-main-logo {
  width: 130px;
  margin-bottom: 5px; /* Tighter gap below logo */
}

.footer-by-text {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  color: #1C1C1C;
  margin: 0;
}

.footer-menus-section {
  order: 2;
  width: 65%;
  display: flex;
  justify-content: space-between;
}

.footer-column h4 {
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 15px; /* Reduced from 20px */
  color: #7F5044;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px; /* Reduced from 12px for a tighter list */
}

.footer-links li a {
  text-decoration: none;
  color: rgba(127, 80, 68, 0.70);
  font-size: 14px;
  transition: color 0.2s;
}

.footer-links li a:hover {
  color: #fa3558;
}

/* --- ROW 2: Tagline & Socials --- */
.footer-middle-section {
  order: 3;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 10px;
}

.footer-tagline {
  max-width: 280px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #1C1C1C;
  margin: 0;
}

.footer-socials {
  display: flex;
  gap: 12px;
  margin: 0;
}

.footer-socials img {
  width: 24px;
  height: 24px;
  transition: opacity 0.2s;
}

.footer-socials a:hover img {
  opacity: 0.7;
}

/* --- DIVIDER & BOTTOM ROW --- */
.footer-divider {
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 25px 0 20px 0; /* Reduced from 50px top, 25px bottom */
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-the-logo img {
  width: 75px; /* Scaled down slightly to fit thinner row */
  height: auto;
}

.footer-copyright {
  font-family: "Manrope", sans-serif;
  color: #1C1C1C;
  font-weight: 400;
  font-size: 10px;
  margin: 0;
}

.footer-legal {
  display: flex;
  gap: 20px;
}

.footer-legal a {
  font-family: "Manrope", sans-serif;
  font-size: 10px;
  font-weight: 400;
  text-decoration: none;
  color: #1C1C1C;
  margin: 0;
  letter-spacing: 0.5px;
}

.footer-legal a:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .site-footer {
    padding: 40px 20px 30px 20px;
  }
  
  .footer-top {
    display: flex;
    flex-direction: column; /* Stack the sections vertically */
    gap: 30px; 
  }
  
  /* ROW 1: Logo & "by..." Centered */
  .footer-logo-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .footer-main-logo {
    max-width: 140px;
    margin: 0 auto 10px auto; /* Added margin below logo */
  }

  /* Added missing CSS for the text under the logo */
  .footer-by-text {
    font-size: 14px;
    color: #1C1C1C;
    margin: 0;
  }
  
  /* ROW 2: Tagline (Left) & Socials (Right) */
  .footer-middle-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-top: -30px;
    margin-bottom: 10px;
  }

  .footer-tagline {
    width: 50%;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
    text-align: left;
    padding-right: 15px; 
  }

  .footer-socials {
    width: 50%;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap; /* Allows icons to wrap nicely on very small screens */
    gap: 8px;
  }
  
  .footer-socials img {
    width: 26px;
    height: 26px;
  }
  
  /* ROW 3: Three Menu Columns */
  .footer-menus-section {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .footer-column {
    width: 33.33%; /* Perfectly divides the row into thirds */
    text-align: center;
    padding: 0 5px;
  }
  
  .footer-column h4 {
    font-size: 11px;
    margin-bottom: 15px;
  }
  
  .footer-links li {
    margin-bottom: 12px;
  }
  
  .footer-links li a {
    font-size: 12px;
  }
  
  /* DIVIDER */
  .footer-divider {
    margin: 30px 0;
    border-top: 1px solid #1C1C1C; 
  }
  
  /* Bottom Container */
  .footer-bottom {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  
  .footer-the-logo { order: 1; width: auto; }
  .footer-the-logo img { width: 50px; height: auto; }
  
  .footer-legal {
    order: 2;
    display: flex;
    gap: 15px;
  }
  .footer-legal a { margin: 0; font-size: 10px; }
  
  .footer-copyright {
    order: 3;
    width: 100%;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 0;
    font-size: 7px;
    line-height: 1.4;
  }
}


/* --- Nudge the Main Plus Sign --- */
.main-plus {
  transform: translate(20px, 0px); /* Adjust these numbers to move it! */
}

/* --- Nudge the Main Equals Sign --- */
.main-equals {
  /*
       The first number moves it Left/Right (positive = right, negative = left).
       The second number moves it Up/Down (positive = down, negative = up).
    */
  transform: translate(30px, 0px);
}

/* ==============================
   CYCLE OF BALANCE SECTION (UPDATED)
============================== */
.cycle-of-balance-section {
    background-color: #FDFBF5;
    padding: 100px 20px 150px 20px;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.cycle-title {
    font-family: 'Fredoka One', cursive !important;
    font-size: 48px !important; /* Added !important to enforce size */
    color: #1C1C1C !important;
    margin-bottom: 120px;
    position: relative;
    z-index: 50;
    text-transform: none !important; /* Added to stop it from forcing all caps if a parent element is doing so */
    font-style: normal !important; /* Added to stop unwanted italics */
    font-weight: 400 !important;
}

.cycle-title .text-pink {
    color: #FA3558 !important; /* Added !important to ensure the pink applies */
    font-family: 'Fredoka One', cursive !important;
}

.cycle-animation-container {
    position: relative;
    max-width: 1250px; /* Increased to fit the 744px loop + 250px text blocks on each side */
    margin: 0 auto;
    height: 550px;
}

/* --- Loop Graphic --- */
.cycle-graphic-area {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%; /* Changed from 744px to 100% to allow scaling */
    max-width: 744px; /* Added max-width to constrain it */
    height: 278px;
    z-index: 1 !important;
    pointer-events: none;
}

.infinity-loop-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.animated-heart {
    position: absolute;
    width: 35px;
    height: auto;
    /* Reset to top-left so JS coordinates map perfectly to the SVG canvas */
    top: 0;
    left: 0;
    z-index: 5 !important;
    will-change: transform;
}

/* --- Text Steps (Grey to Black) --- */
.cycle-step {
    position: absolute;
    z-index: 50 !important;
    transition: transform 0.3s ease;
}

.cycle-step.active-step {
    transform: scale(1.05);
}

.step-title {
    font-family: 'Manrope', sans-serif !important;
    text-transform: capitalize !important;
    text-align: center;
    font-size: 34px !important;
    font-weight: 300 !important;
    color: #B0B0B0 !important;
    line-height: 1.1 !important;
    margin: 0 0 15px 0 !important;
    transition: color 0.4s ease !important;
}

.step-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    text-align:center ;
    font-weight: 500 !important;
    color: #B0B0B0 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    transition: color 0.4s ease !important;
}

/* --- Highlighted (Black) State --- */
.cycle-step.active-step .step-title,
.cycle-step.active-step .step-desc {
    color: #1C1C1C !important;
}

/* Exact Positioning (pushed outward to avoid overlapping the image) */
.step-eat {
    top: 110px;
    left: -10px; /* Pushed to the far left of the widened container */
    text-align: right;
    width: 250px;
}

.step-feel {
    top: 90px;
    right: -10px; /* Pushed to the far right of the widened container */
    text-align: left;
    width: 250px;
}

.step-nourish {
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: 350px;
}
.step-nourish.active-step {
    transform: translateX(-50%) scale(1.05);
}

/* ==============================
   RESPONSIVE (Stack on Mobile)
============================== */
@media (max-width: 850px) {
  .cycle-of-balance-section {
    padding: 60px 15px 80px 15px;
  }
  
  .cycle-title {
    font-size: 32px !important;
    margin-bottom: 50px;
  }
  
  .cycle-animation-container {
    height: 380px; /* Adjusted height for stacked mobile view */
  }
  
  .cycle-graphic-area {
    top: 130px; /* Pushed down to give Eat and Feel space */
    height: auto;
  }
  
  /* Hide the moving heart animation */
  .animated-heart,
  .cycle-heart-icon {
    display: none !important;
  }
  
  .cycle-step {
    width: 48% !important; /* Split the top space equally */
  }
  
  /* Place eat on left top of the wheel */
  .step-eat {
    top: -10px;
    left: -5px;
    text-align: center;
  }
  
  /* Place feel better on right top of the wheel */
  .step-feel {
    top: -10px;
    right: 0;
    text-align: center;
  }
  
  /* Place nourish below the wheel */
  .step-nourish {
    top: 270px;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 90% !important;
    text-align: center;
  }
  
  .step-nourish.active-step {
    transform: translateX(-50%) scale(1.05);
  }
  
  /* Adjust text sizes for mobile */
  .step-title {
    font-size: 22px !important;
    margin-bottom: 8px !important;
  }
  
  .step-desc {
    font-size: 9px !important;
  }
}

/* ==============================
   BUY THE COLLECTION SECTION
============================== */
.buy-collection-section {
  /* CRITICAL FIX: Adds the off-white color behind the transparent parts of the wave */
  background-color: #fdfbf5;
  background-image: url("https://staging.thehormoneessentials.com/wp-content/uploads/2026/05/wavey-bg-scaled.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;

  padding: 160px 20px 160px 20px;
  width: 100%;
  box-sizing: border-box;

  margin-top: -40px;
  position: relative;
  
  /* FIX: Lowered z-index from 20 to 1. 
     This stops the section from covering fixed popups on scroll, 
     while still allowing the wave margin to overlap the previous block. */
  z-index: 1; 
}

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600&display=swap'); 

.collection-main-heading .buy_the_font{
    font-family: "Fredoka One", sans-serif !important;
    font-size: 40px !important;
    font-weight: 600 !important;
}

.collection-main-heading {
  text-align: center;
  font-family: "Lora", serif !important;
  color: #ffffff !important;
  font-size: 38px !important;
  margin-bottom: 60px;
  margin-top: -60px;
  text-transform: none !important;
  
  

}

.collection-main-heading .bold-sans {
  /* Ensures the bold part also uses Fredoka One */
  font-family: "Fredoka One", sans-serif !important;
  /* Extra bold weight for 'Buy the' */
  font-weight: 800 !important;
}

/* --- Cards Container --- */
.collection-cards-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Individual Card Styling --- */
.flo-product-card {
  background-color: #fdfbf5 !important;
  border-radius: 30px;
  padding: 40px 30px;
  width: 100%;
  max-width: 550px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  margin-bottom: 30px;
}

.card-image-container img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* --- Card Text & Layout --- */
.card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.flo-product-card .card-title {
  font-family: var(--flo-font-serif, "Lora", serif) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  color: #333 !important;
  margin: 0 !important;
}

.card-price-box {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.pack-size {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 14px;
  color: #666;
}

.price-amt {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 24px;
  font-weight: 800;
  color: #1c1c1c;
}

.card-description {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 14px;
  color: #555;
  margin: 0 0 20px 0;
}

.card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: auto; /* Pushes to bottom of card */
}

.card-bullets {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 13px;
  color: #444;
  padding-left: 18px;
  margin: 0;
  max-width: 60%; /* Leaves room for the button */
}

.card-bullets li {
  margin-bottom: 6px;
}

.flo-add-cart-btn {
  background-color: #ffc629;
  color: #333;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  white-space: nowrap;
  position: relative;
  z-index: 20;
}

.flo-add-cart-btn:hover {
  background-color: #f4b81a;
  transform: translateY(-2px);
}

/* ==============================
   RESPONSIVE (Stack on Mobile)
============================== */
@media (max-width: 1200px) {
    .flo-product-card{
        max-width: 90%;
    }
}

@media (max-width: 1100px) {
  .collection-cards-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .card-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .card-bullets {
    max-width: 100%;
  }

  .flo-add-cart-btn {
    width: 100%;
  }
}

/* ==============================
   HARDCODED BENEFITS GRID SECTION
============================== */
.benefits-grid-section {
    background-color: #fdfbf5;
    padding: 100px 20px;
    width: 100%;
    box-sizing: border-box;
}

.benefits-grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    max-width: 1250px;
    /* This is the magic line. It sets top/bottom margin to 0, and auto-calculates left/right margins to perfectly center the container */
    margin: 0 auto; 
}

.benefit-box {
    border-radius: 24px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04);
}

.benefit-box-title {
    font-family: 'Lora', serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    margin: 0 0 15px 0 !important;
    line-height: 1.3 !important;
    text-transform: none !important;
}

.benefit-box-sub {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
}

/* --- Color Variants with Subtle Gradients --- */

.box-peach {
    background: linear-gradient(135deg, #FAD8D0, #F0BDB0);
}
.box-peach .benefit-box-title,
.box-peach .benefit-box-sub {
    color: #7A3F31 !important;
}

.box-red {
    background: linear-gradient(135deg, #FA3A5D, #D62142);
}
.box-red .benefit-box-title,
.box-red .benefit-box-sub {
    color: #FFFFFF !important;
}

.box-magenta {
    background: linear-gradient(135deg, #E2367A, #B41957);
}
.box-magenta .benefit-box-title,
.box-magenta .benefit-box-sub {
    color: #FFFFFF !important;
}

.box-green {
    background: linear-gradient(135deg, #4F6A3D, #334626);
}
.box-green .benefit-box-title,
.box-green .benefit-box-sub {
    color: #FFFFFF !important;
}

/* --- Responsive Layout for Tablets & Phones --- */
@media (max-width: 1024px) {
    .benefits-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ==============================
   MOBILE RESPONSIVE (2x2 GRID)
============================== */

@media (max-width: 768px) {

    .benefits-grid-section {
        padding: 70px 20px !important;
    }

    .benefits-grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .benefit-box {
        padding: 28px 18px !important;
        border-radius: 20px !important;
        min-height: 180px;
    }

    .benefit-box-title {
        font-size: 18px !important;
        line-height: 1.25 !important;
        margin-bottom: 12px !important;
    }

    .benefit-box-sub {
        font-size: 9px !important;
        letter-spacing: 1.2px !important;
        line-height: 1.4;
    }
}


/* ==============================
   REAL STORIES SECTION
============================== */
.stories-section {
  background-color: #fdfbf5;
  padding: 20px 20px 120px 20px;
  width: 100%;
  box-sizing: border-box;
}

.stories-heading {
  text-align: center;
  font-family: "Fredoka One", sans-serif !important;
  font-weight: 400 !important;
  font-size: 42px !important;
  color: #1c1c1c !important;
  margin-bottom: 60px;
  text-transform: capitalize !important;
}

/* --- Video Grid --- */
.video-grid-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 25px;
  max-width: 1500px;
  margin: 0 auto 60px auto;
  flex-wrap: wrap;
}

.video-placeholder {
  width: 260px;
  height: 460px;
  background-color: #2a3b32;
  border-radius: 20px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.play-icon-overlay {
  width: 60px;
  height: 60px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    transform 0.2s,
    background-color 0.2s;
}

.play-icon-overlay::after {
  content: "";
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid rgba(255, 255, 255, 0.9);
  margin-left: 5px;
}

.video-placeholder:hover .play-icon-overlay {
  transform: scale(1.1);
  background-color: rgba(0, 0, 0, 0.5);
}

/* --- Pink Pill Button --- */
.stories-btn-container {
  display: flex;
  justify-content: center;
}

.flo-primary-btn-pink {
  display: inline-block;
  background-color: #fa3558;
  color: #ffffff;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 60px;
  border-radius: 50px;
  box-shadow: 0 6px 15px rgba(250, 53, 88, 0.3);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.flo-primary-btn-pink:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(250, 53, 88, 0.4);
  color: #ffffff;
}

/* ==============================
   MOBILE RESPONSIVE
============================== */
@media (max-width: 768px) {

  .stories-section {
    padding: 60px 20px 80px !important;
  }

  .stories-heading {
    font-size: 30px !important;
    margin-bottom: 35px !important;
    line-height: 1.2;
    max-width: 200px;
    text-align: center !important;

    margin-left: auto !important;
    margin-right: auto !important;
}

  /* Center container */
  .video-grid-container {
    justify-content: center !important;
    margin-bottom: 35px !important;
  }

  /* Hide all except first box */
  .video-placeholder:not(:first-child) {
    display: none !important;
  }

  /* Single image/video box */
  .video-placeholder:first-child {
    width: 100% !important;
    max-width: 320px !important;
    height: 400px !important;
    border-radius: 24px !important;

    /* optional image placeholder */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  /* Play icon */
  .play-icon-overlay {
    width: 54px !important;
    height: 54px !important;
  }

  /* Button below */
  .stories-btn-container {
    justify-content: center !important;
  }

  .flo-primary-btn-pink {
    width: 100%;
    max-width: 250px;
    text-align: center;
    padding: 16px 28px !important;
    font-size: 18px !important;
    border-radius: 999px !important;
  }
}


/* ==============================
   WOMEN ON FLO SECTION
============================== */
.women-on-flo-section {
  background-color: #fbece8;
  padding: 160px 20px 160px 20px;
  margin-top: 100px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

/* --- SVG Wave Marquee --- */
.wavy-marquee-wrapper {
  position: absolute;
  top: -110px;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
  z-index: 5;
}

.wavy-bg-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wavy-text {
  font-family: "Dancing Script", cursive !important;
  font-size: 38px;
  letter-spacing: 1px;
}

/* --- Testimonial Layout --- */
.testimonial-layout-container {
  max-width: 1150px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* --- NEW ARROW ALTERNATIVE STYLING --- */
.slider-arrow {
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
  border: none;
  color: #8c5535;
  font-size: 50px;
  font-family: serif !important;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    color 0.2s,
    transform 0.2s;
  flex-shrink: 0;
  padding: 10px 20px;
  opacity: 0.7;
}
.slider-arrow:hover {
  background-color: transparent !important;
  color: #fa3558 !important;
  transform: scale(1.1);
  opacity: 1;
}

@media (max-width: 900px) {
  .slider-arrow {
    font-size: 30px;
    padding: 5px 10px;
  }
}

/* --- Center Content Grid --- */
.testimonial-content-wrapper {
  display: flex;
  align-items: center;
  gap: 60px;
  flex: 1;
  max-width: 900px;
}

.testimonial-image-col {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.testimonial-photo {
  width: 90%;
  max-width: 300px;
  height: 380px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  transition: opacity 0.3s ease-in-out;
}

.testimonial-text-col {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 2px solid rgba(0, 0, 0, 0.05);
  padding-left: 40px;
}

.quote-mark {
  font-family: "Lora", serif !important;
  font-size: 60px;
  color: #8c5535;
  line-height: 0.5;
  margin-bottom: 20px;
  opacity: 0.5;
}

.testimonial-quote {
  font-family: "Manrope", sans-serif !important;
  font-size: 18px;
  font-weight: 500;
  color: #4a4a4a;
  line-height: 1.7;
  margin: 0 0 20px 0;
  transition: opacity 0.3s ease-in-out; /* NEW: Added for smooth fading */
}

.testimonial-author {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  color: #1c1c1c;
  margin: 0;
  transition: opacity 0.3s ease-in-out; /* NEW: Added for smooth fading */
}

/* --- Button --- */
.community-btn-wrapper {
  text-align: center;
  margin-top: 60px;
}

.community-cta-btn {
  display: inline-block;
  background-color: #fa3558;
  color: #ffffff !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  padding: 14px 40px;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(250, 53, 88, 0.25);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.community-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 25px rgba(250, 53, 88, 0.35);
}

/* --- Mobile Responsive --- */
@media (max-width: 900px) {
  .women-on-flo-section {
    padding-top: 140px;
  }
  .testimonial-content-wrapper {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }
  .testimonial-image-col {
    justify-content: center;
  }
  .testimonial-text-col {
    border-left: none;
    border-top: 2px solid rgba(0, 0, 0, 0.05);
    padding-left: 0;
    padding-top: 40px;
    align-items: center;
  }
  .slider-arrow {
    display: none;
  }
  .wavy-marquee-wrapper {
    top: -60px;
    height: 60px;
  }
  .wavy-text {
    font-size: 20px;
  }
}

/* ==============================
   FAQ SECTION
============================== */
.faq-section {
  background-color: #fa3558; /* Main Pink Background */
  padding: 250px 10px 200px 20px;
  position: relative;
  overflow: hidden; /* Keeps scattered images inside */
  width: 100%;
  box-sizing: border-box;
}

/* --- Scattered Background Images --- */
.faq-bg-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none; /* Prevents images from blocking clicks on the FAQs */
}

.faq-bg-img {
  position: absolute;
  width: 180px; /* Adjust size of floating characters here */
  height: auto;
  opacity: 0.9;
}

/* Hardcoded 'random' positions and rotations */
.img-1 { top: 15%; left: 17%; transform: rotate(0deg); }
.img-2 { bottom: 5%; right: 35%; transform: rotate(10deg) scaleX(-1); }
.img-3 { top: 8%; right: 40%; transform: rotate(-20deg); }
.img-4 { bottom: 20%; left: 73%; transform: rotate(-10deg) scaleX(-1); }
.img-5 { top: 8%; right: 10%; transform: rotate(-5deg); }
.img-6 { bottom: 30%; left: 25%; transform: rotate(-15deg); }
.img-7 { top: 40%; left: 60%; transform: rotate(-25deg); width: 130px; }
.img-8 { bottom: 5%; right: 73%; transform: rotate(5deg) scaleX(-1); width: 130px; }

/* --- FAQ Content Wrapper --- */
.faq-content-wrapper {
  position: relative;
  z-index: 10; /* Keeps text above the scattered images */
  max-width: 800px;
  margin: 0 auto;
}

.faq-heading {
  text-align: center;
  font-family: "Fredoka One", sans-serif !important;
  color: #ffffff !important;
  font-size: 42px !important;
  font-weight: 400 !important;
  margin-top: -50px;
  padding-bottom: 50px;
  text-transform: capitalize !important;
}

/* --- Native HTML Accordion Styling --- */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-item {
  background-color: #ffffff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Alternate the colors of the boxes just like the design */
.faq-item:nth-child(even) {
  background-color: #f8d9d2; /* Light Peach/Pink */
}

/* Hide default HTML triangle marker */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary {
  padding: 20px 30px;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 18px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  list-style: none; /* Hides default marker in Firefox/Edge */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: opacity 0.2s;
}

.faq-item summary:hover {
  opacity: 0.8;
}

.faq-arrow {
  font-size: 14px;
  transition: transform 0.45s ease-in-out;
}

/* Flip the arrow when the dropdown is opened */
.faq-item[open] summary .faq-arrow {
  /* -180deg rotates it counter-clockwise, exactly matching the video */
  transform: rotate(-180deg); 
}

/* --- THE FIX: Define collapsed & expanded states for smooth animation --- */
.faq-answer {
  max-width: 640px;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  
  /* Initial collapsed state */
  max-height: 0;
  opacity: 0;
  overflow: hidden; 
  padding: 0 30px 0 30px; /* 0 bottom padding when closed */
  
  /* ease-in-out makes the slide effect feel much more natural */
  transition:
    max-height 0.45s ease-in-out,
    opacity 0.35s ease-in-out,
    padding 0.35s ease-in-out;
}

/* Expanded state when the <details> element is opened */
.faq-item[open] .faq-answer {
  max-height: 800px; /* Ensure this is larger than your tallest text block */
  opacity: 1;
  padding: 0 30px 20px 30px; /* Restores the bottom padding cleanly */
}

/* Hide floating images on mobile so they don't crowd the text */
/* ==============================
   FAQ MOBILE RESPONSIVENESS
============================== */
@media (max-width: 768px) {

  .faq-section {
    padding: 120px 18px 90px 18px !important;
  }

  /* Hide floating images */
  .faq-bg-img {
    display: none !important;
  }

  /* Wrapper */
  .faq-content-wrapper {
    max-width: 100% !important;
  }

  /* Heading */
  .faq-heading {
    font-size: 30px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    padding-bottom: 30px !important;
    max-width: 280px;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* FAQ spacing */
  .faq-accordion {
    gap: 12px !important;
  }

  /* Card */
  .faq-item {
    border-radius: 18px !important;
  }

  /* Question row */
  .faq-item summary {
    padding: 18px 20px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    gap: 15px;
  }

  /* Arrow */
  .faq-arrow {
    font-size: 12px !important;
    flex-shrink: 0;
  }

  /* Answer */
  .faq-answer {
    max-width: 100% !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    padding: 0 20px !important;
  }

  .faq-item[open] .faq-answer {
    padding: 0 20px 18px 20px !important;
    max-height: 600px !important;
  }
}


/* ==============================
   EXTRA SMALL MOBILE
============================== */
@media (max-width: 480px) {

  .faq-section {
    padding: 100px 14px 80px 14px !important;
  }

  .faq-heading {
    font-size: 26px !important;
    max-width: 240px !important;
    padding-bottom: 25px !important;
  }

  .faq-item summary {
    font-size: 14px !important;
    padding: 16px 18px !important;
  }

  .faq-answer {
    font-size: 13px !important;
  }

  .faq-item {
    border-radius: 16px !important;
  }
}

/* ==============================
   MORE ABOUT FLO SECTION
============================== */
.more-about-section {
  background-color: #fdfbf5;
  padding: 80px 20px 100px 20px;
  width: 100%;
  box-sizing: border-box;
}

.more-about-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Header Row --- */
.more-about-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
}

.more-about-title {
  font-family: "Fredoka One", sans-serif !important;
  font-size: 38px !important;
  color: #1c1c1c !important;
  margin: 0;
  text-transform: capitalize !important;
  font-weight: 400;
}

.view-all-link {
  font-family: var(--flo-font-serif, "Lora", serif);
  font-size: 14px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #555;
  padding-bottom: 2px;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.view-all-link:hover {
  color: #fa3558;
  border-bottom-color: #fa3558;
}

/* --- Peach Banner Box --- */
.blog-banner-box {
  background-color: #f9dbd0;
  border-radius: 20px;
  padding: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.blog-banner-content {
  flex: 1.3;
  max-width: 750px;
}

.blog-banner-text {
  font-family: var(--flo-font-serif, "Lora", serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: #333 !important;
  text-transform: capitalize !important;
  line-height: 1.45;
  margin: 0 0 40px 0;
}

.blog-read-btn {
  display: inline-block;
  background-color: #fa3558;
  color: #ffffff;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 80px;
  border-radius: 18px;
  transition:
    transform 0.2s,
    background-color 0.2s;
}

.blog-read-btn:hover {
  background-color: #e02e4e;
  transform: translateY(-2px);
  color: #ffffff;
}

.blog-banner-image {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.blog-banner-image img {
  max-width: 90%;
  height: auto;
  border-radius: 12px;
}

/* ==============================
   RESPONSIVE (TABLET + MOBILE)
============================== */
@media (max-width: 850px) {

  /* Header stays in one row */
  .more-about-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
  }

  .more-about-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }

  .view-all-link {
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* Card Layout */
  .blog-banner-box {
    display: flex !important;
    flex-direction: column !important;
    padding: 28px 24px !important;
    text-align: center !important;
    gap: 25px !important;
  }

  /* IMAGE FIRST */
  .blog-banner-image {
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .blog-banner-image img {
    max-width: 260px !important;
    width: 100% !important;
    height: auto !important;
  }

  /* CONTENT SECOND */
  .blog-banner-content {
    order: 2 !important;
    max-width: 100% !important;
  }

  .blog-banner-text {
    font-size: 18px !important;
    line-height: 1.5 !important;
    margin: 0 0 24px 0 !important;
  }

  .blog-read-btn {
    font-size: 16px !important;
    padding: 12px 50px !important;
    border-radius: 14px !important;
  }
}

/* EXTRA SMALL MOBILE */
@media (max-width: 480px) {

  .more-about-title {
    font-size: 24px !important;
  }

  .view-all-link {
    font-size: 11px !important;
  }

  .blog-banner-box {
    padding: 22px 18px !important;
  }

  .blog-banner-image img {
    max-width: 220px !important;
  }

  .blog-banner-text {
    font-size: 16px !important;
  }

  .blog-read-btn {
    width: 100% !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}

/* ==============================
   FINAL CTA BANNER SECTION
============================== */
.cta-banner-section {
  background-color: #e2b4c5;
  background-image: url('https://staging.thehormoneessentials.com/wp-content/uploads/2026/05/wavy-bg-cta.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 110px 20px;
  box-sizing: border-box;
  border-radius: 26px;
  text-align: center;
  margin-bottom: 70px;
  width: 100%;
  position: relative;
  z-index: 10;
}

.cta-banner-content {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-heading {
  font-family: "Fredoka One", sans-serif !important;
  font-size: 54px !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-transform: capitalize !important;
  line-height: 1.2;
  margin: 0 0 25px 0;
}

.cta-subheading {
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 18px;
  font-weight: 500;
  color: #333333;
  margin: 0 0 40px 0;
}

.cta-buy-btn {
  display: inline-block;
  background-color: #ce4972;
  color: #ffffff;
  font-family: var(--flo-font-sans, "Manrope", sans-serif);
  font-size: 11px;
  font-weight: 500;
  margin-left: -10px;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  padding: 5px 70px;
  border-radius: 50px;
  box-shadow: 0 4px 15px rgba(206, 73, 114, 0.3);
  transition:
    transform 0.2s,
    background-color 0.2s;
}

.cta-buy-btn:hover {
  background-color: #b53e61;
  transform: translateY(-2px);
  color: #ffffff;
}

/* ==============================
   RESPONSIVE
============================== */
@media (max-width: 768px) {
  .cta-heading {
    font-size: 38px !important;
  }
  .cta-subheading {
    font-size: 16px;
  }
  .cta-banner-section {
    padding: 80px 20px;
  }
  
  .cta-buy-btn {

  padding: 10px 70px;
  border-radius: 40px;
  
}
}

.ingredients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 40px 0;
}

.ingredient-card {
  text-align: center;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.ingredient-card img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

/* ==============================
   INGREDIENTS PAGE
============================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Manrope:wght@400;500;600&family=Sora:wght@400;600&display=swap');

.flo-ingredients-wrapper {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #485d30; /* Updated to blue */
}

.ingredients-hero {
  position: relative;
  width: 100%;
  min-height: 800px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 5vw;
  box-sizing: border-box;
}

.bg-semicircle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  object-fit: cover;
  object-position: top;
}

.ingredients-container {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.ingredients-content {
  flex: 1;
  max-width: 500px;
  color: #ffffff;
}

.ingredients-title {
  margin: 0 0 24px 0;
  line-height: 1.1;
  color: #ffffff;
}

.font-fredoka {
  font-family: "Fredoka One", cursive;
  font-size: 84px;
  font-weight: 400;
}

.font-sora {
  font-family: "Sora", sans-serif;
  font-size: 64px;
  font-weight: 400;
}

.ingredients-desc {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.font-manrope {
  font-family: "Manrope", sans-serif;
}

.ingredients-visuals {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.product-graphic {
  max-width: 320px;
  height: auto;
  position: relative;
  z-index: 5;
}

.arrow-graphic {
  position: absolute;
  left: -60px;
  top: 30%;
  width: 120px;
  height: auto;
  z-index: 6;
  transform: rotate(-10deg);
}

/* ==============================
   MOBILE RESPONSIVE (TEXT ONLY)
============================== */
@media screen and (max-width: 768px) {

  /* MAIN WRAPPER */
  .flo-ingredients-wrapper {
    width: 100%;
    overflow: hidden !important;
    background-color: #a5062d !important; /* maroon */
  }

  /* HERO SECTION */
  .ingredients-hero {
    min-height: auto !important;
    padding: 100px 28px 80px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
  }

  /* REMOVE DESKTOP LAYOUT */
  .ingredients-container {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    margin: 0 auto !important;
  }

  /* HIDE ALL IMAGES */
  .ingredients-visuals,
  .ingredients-visuals *,
  .product-graphic,
  .arrow-graphic,
  .bg-semicircle,
  img.bg-semicircle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* CONTENT */
  .ingredients-content {
    width: 100% !important;
    max-width: 340px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    flex: unset !important;
    color: #ffffff !important;
  }

  /* TITLE */
  .ingredients-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 30px !important;
    text-align: center !important;
    line-height: 0.95 !important;
  }

  /* "Inside" */
  .font-fredoka {
    font-family: "Fredoka One", cursive !important;
    font-size: 72px !important;
    line-height: 0.9 !important;
    display: block !important;
    margin: 0 !important;
  }

  /* "a Bite" */
  .font-sora {
    font-family: "Sora", sans-serif !important;
    font-size: 64px !important;
    line-height: 1 !important;
    display: block !important;
    margin: 0 !important;
  }

  /* DESCRIPTION */
  .ingredients-desc {
    font-size: 20px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
}

/* ==============================
   GLOBAL TITLE CASING OVERRIDE
   Forces Title Case and overrides theme ALL CAPS settings
============================== */
.flobites-v2-wrapper h1,
.flobites-v2-wrapper h2,
.flobites-v2-wrapper h3,
.flobites-v2-wrapper h4,
.flobites-v2-wrapper .hero__heading,
.flo-ingredients-wrapper h1,
.flo-ingredients-wrapper h2,
.flo-ingredients-wrapper h3,
.flo-ingredients-wrapper h4,
.ingredients-title {
  /*text-transform: capitalize !important;*/
}

/* ==============================
   TITLE CASE EXEMPTION
   Allows exact HTML casing for the Ingredients Title
============================== */
.ingredients-title,
.flo-ingredients-wrapper .ingredients-title {
  text-transform: none !important;
}

/* ==============================
   SUPER SEEDS SECTION
============================== */
.super-seeds {
  background-color: #4a5d3b;
  padding: 350px 20px 300px 20px !important;
  min-height: 900px;
  position: relative;
  text-align: center;
  color: #ffffff;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.seeds-container {
  max-width: 1200px;
  margin: 0 auto;
}

.seeds-header {
  max-width: 800px;
  margin: 0 auto 80px auto;
}

.seeds-title {
  font-family: "Lora", serif !important;
  font-size: 42px;
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
  margin-top: -100px;
  text-transform: none !important;
}

.seeds-title span {
  font-family: "Fredoka One", cursive;
  font-weight: 400;
}

.seeds-subtitle {
  font-family: "Manrope", sans-serif;
  max-width: 680px;
  font-size: 18px;
  margin-left: 50px;
  line-height: 1.6;
  opacity: 1;
}

.seeds-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.seed-card {
  flex: 1;
  min-width: 250px;
  max-width: 280px;
  transition: transform 0.3s ease;
}

.seed-card:hover {
  transform: translateY(-10px);
}

.seed-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}

/* ==============================
   INSIDE A BITE SECTION (Image Background)
============================== */
.inside-a-bite {
  position: relative;
  background-color: transparent;
  background-image: url("https://staging.thehormoneessentials.com/wp-content/uploads/2026/05/semicircle-bg-scaled.png");
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 80px 100px 150px 100px;
  margin-bottom: -150px;
  z-index: 20;
}

.inside-container {
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.inside-text-column,
.inside-arrow-column,
.inside-product-column {
  flex: 1 1 55%;
  max-width: 55%;
}

.inside-text-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.inside-heading {
  font-size: 70px;
  font-family: var(--flo-font-display, "Fredoka", sans-serif);
  line-height: 1.1;
  text-transform: capitalize !important;
  color: #ffffff !important;
  margin: 0;
  margin-top: 50px;
  margin-bottom: 20px;
}

.inside-heading .a_bite_font{
    font-size: 76px;
    font-family: "Lora", serif !important;
    text-transform: none !important;
}

.inside-description {
  font-size: 16px;
  line-height: 1.5;
  font-family: Manrope;
  color: #ffffff !important;
  margin-top: -50px;
}

.inside-arrow-column {
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.inside-arrow-img {
  width: 180px;
  height: 180;
  margin-top: -240px;
  transform: translateX(80px);
}

.inside-product-column {
  display: flex;
  justify-content: flex-end;
}

.inside-product-img {
  width: 90%;
  max-width: 300px;
  height: 90%;
}

@media (max-width: 768px) {
  .inside-a-bite {
    margin-top: 90px;
    padding: 50px 20px 80px 20px;
    margin-bottom: -100px; /* Resets any negative desktop margins */
  }

  .inside-container {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .inside-text-column,
  .inside-arrow-column,
  .inside-product-column {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .inside-heading {
    font-size: 40px;
    margin-top: 0;
    margin-bottom: 15px;
  }

  /* Hides the <br> so "Inside a Bite" stays on one line */
  .inside-heading br {
    display: none;
  }

  .inside-heading .a_bite_font {
    font-size: 44px;
  }

  .inside-description {
    font-size: 16px;
    margin-top: 0;
  }

  .inside-arrow-column {
    margin: 10px 0;
  }

  /* Resets the clumsy desktop positioning and rotates arrow downwards */
  .inside-arrow-img {
    width: 120px;
    margin-top: 0;
    transform: rotate(75deg); /* Adjust degrees if you want it pointing slightly differently */
  }

  .inside-product-column {
    justify-content: center;
    padding-top: 10px; /* Gives space for the rotated image */
    padding-bottom: 10px;
  }

  /* Allows horizontal image to fit nicely on mobile screens */
  .inside-product-img {
    width: 90%;
    max-width: 70px;
    height: 90%; /* Tilts the chocolate horizontally */
  }
}


/* ==============================
   OTHER KEY INGREDIENTS SECTION (Fixed Arch)
============================== */
.other-ingredients {
  position: relative;
  background-color: #fdfbf5;

  /* Force Full Width */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;

  z-index: 20;
  padding: 20px 20px 60px 20px;
  text-align: center;
}

/* The Overscaled Arch Magic */
.other-ingredients::before {
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  height: 250px;
  background-color: #fdfbf5;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  z-index: -1;
}

.other-ingredients-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.other-title {
  font-family: "Fredoka One", cursive;
  font-size: 42px;
  font-weight: 400;
  color: #1c1c1c;
  text-transform: capitalize !important;
  margin-bottom: 60px;
}

.other-title .highlight-green {
  background-color: #728a5e;
  font-family: "Lora", serif !important;
  color: #ffffff;
  padding: 5px 15px;
  border-radius: 4px;
  display: inline-block;
}

/* ==============================
   KEY INGREDIENTS RADIAL LAYOUT
============================== */
.key-ingredients-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
  max-width: 1300px;
  margin: 0 auto 80px auto;
}

.ingredient-side-col {
  display: flex;
  flex-direction: column;
  gap: 50px;
  flex: 1;
}

.ingredient-center-col {
  flex: 1.5;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 5;
}

.center-pouch-img {
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.1));
}

.shifted-left {
  transform: translateX(-100px);
}
.shifted-right {
  transform: translateX(100px);
}

.ing-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ing-circle-item img {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.ing-name {
  font-family: "Fredoka One", cursive !important;
  font-size: 18px;
  font-weight: 400 !important;
  color: #000000 !important;
  margin: 0 0 4px 0;
  text-transform: none !important;
}

.ing-benefit {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px;
  font-weight: 400 !important;
  color: #888888 !important;
  margin: 0;
  text-transform: lowercase;
}

.minor-ingredients-row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px 0 20px;
  flex-wrap: wrap;
}

.minor-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.minor-item .ing-name{
  font-family: "Manrope", sans-serif !important; 
}

@media (max-width: 900px) {
  .key-ingredients-wrapper {
    flex-direction: column;
    gap: 60px;
  }
  .shifted-left,
  .shifted-right {
    transform: none;
  }
  .minor-ingredients-row {
    gap: 30px;
  }
}

/* ==============================
   WITH THE GOODNESS OF SECTION
============================== */
.goodness-section {
  background-color: #fdfbf5;
  padding: 80px 20px 140px 20px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.goodness-container {
  max-width: 1100px;
  margin: 0 auto;
}

.goodness-title {
  font-family: "Fredoka One", cursive !important;
  font-size: 40px;
  font-weight: 400;
  color: #1c1c1c;
  padding-bottom: 50px;
  margin: 0 0 70px 0;
  text-transform: none !important;
}

.goodness-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  flex-wrap: wrap;
}

.goodness-card {
  flex: 1;
  min-width: 250px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.goodness-card img {
  height: 200px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin-bottom: 24px;
}

.goodness-desc {
  font-family: "Manrope", serif !important;
  font-size: 16px;
  line-height: 1.5;
  color: #555555;
  margin: 0;
  max-width: 260px;
}

/* Responsive Mobile Stack */
@media (max-width: 850px) {
  .goodness-grid {
    flex-direction: column;
    align-items: center;
    gap: 50px;
  }
  .goodness-title {
    font-size: 32px;
    margin-bottom: 50px;
  }
}

/* ==============================
   MYO-INOSITOL SPECIFIC SIZING
============================== */
/* ==============================
   MYO-INOSITOL SPECIFIC SIZING
============================== */
.goodness-card .myo-special-img {
  max-width: none !important;
  transform: none;
  margin-bottom: 24px;
}

/* ==============================
   NOTHING EXTRA SECTION (Bulletproof Full-Bleed)
============================== */
.nothing-extra-section {
  position: relative;

  /* Remove buggy 100vw and negative margin hacks entirely */
  width: 100%;
  max-width: 1200px; /* Keep content safely contained */
  margin: 0 auto;
  /* Clean vertical spacing top and bottom */
  padding: 60px 20px 60px 20px;
  text-align: center;

  /* Keep text and buttons safely ABOVE the pseudo-background */
  z-index: 10;
}

/* The Bulletproof Edge-to-Edge Background */
.nothing-extra-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; /* Spans the entire screen from monitor edge to monitor edge */
  height: 100%; /* Matches the exact height of the text section */
  background-color: #f9dbd0; /* The requested peach background */
  z-index: -1; /* Pushes it behind all the text and buttons */
}

.nothing-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Typography for the Title */
.nothing-title {
  font-size: 54px;
  margin-bottom: 80px;
  color: #1c1c1c;
  margin: 0 0 60px 0 !important;
  text-transform: none !important;
}

.nothing-bold {
  font-family: "Fredoka One", cursive !important;
  font-weight: 400;
}

.nothing-serif {
  font-family: "Lora", serif !important;
  font-weight: 400;
}

/* The 3-Column Text Grid */
.nothing-features {
  display: flex;
  justify-content: center;
  gap: 80px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-item p {
  font-family: "Manrope", sans-serif !important;
  font-size: 24px;
  color: #333333;
  margin: 0 0 16px 0;
}

/* The delicate underline accent */
.feature-line {
  width: 48px;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.15);
}

/* The Pink Pill Button */
.nothing-btn {
  display: inline-block;
  background-color: #fa3558;
  color: #ffffff !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 16px;
  margin-left: -20px;
  font-weight: 500;
  text-decoration: none;
  padding: 16px 32px;
  border-radius: 50px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.nothing-btn:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Responsive Stack for Mobile */
@media (max-width: 768px) {
  .nothing-features {
    flex-direction: column;
    gap: 40px;
  }
  .nothing-title {
    font-size: 36px;
  }
}

/* ==============================
   WHY THIS COMBINATION WORKS (Refined HTML/CSS)
============================== */
.combo-section {
  background-color: #fdfbf5;
  padding: 60px 20px 30px 20px;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.combo-container {
  margin-left: -20px;
  max-width: 1350px;
  margin: 0 auto;
}

/* The Main Pink Box */
.combo-pink-box {
  background-color: #fa3558;
  border-radius: 40px;
  padding: 60px;
  margin: 35px;
  display: flex;
  align-items: center;
  gap: 80px;
  box-shadow: 0 20px 40px rgba(250, 53, 88, 0.15);
}

/* --- LEFT COLUMN (Graphic Composition) --- */
.combo-left-col {
  flex: 0 0 350px;
  margin-left: 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.brown-bg {
  width: 80%;
  height: auto;
  position: relative;
  z-index: 5;
}

.combo-graphic-title {
  position: absolute;
  top: 70px;
  left: 15px;
  z-index: 10;
  font-family: "Fredoka One", cursive !important;
  font-size: 38px;
  font-weight: 300;
  color: #ffffff !important;
  line-height: 1.1;
  margin: 0;
  text-transform: none !important;
}

.combo-graphic-title .yellow-text {
  color: #fbc220 !important;
}

.yellow-product {
  position: absolute;
  bottom: 2px;
  left: 47%;
  transform: translateX(-62%);
  width: 80%;
  max-width: 320px;
  z-index: 15;
}

/* Scaled-Up Spikes — radiate from top-left bite corner */
.spike {
  position: absolute;
  width: 75px;
  height: auto;
  z-index: 2;
}

.spike-1 {
  top: 75px;
  left: 250px;
  transform: rotate(-10deg);
}

.spike-2 {
  top: -5px;
  left: 250px;
  transform: rotate(-10deg);
}

.spike-3 {
  top: -50px;
  left: 200px;
  transform: rotate(-10deg);
}

/* --- RIGHT COLUMN (Text & Cards) --- */
.combo-right-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* --- RIGHT COLUMN TYPOGRAPHY UPDATES --- */

.combo-main-text {
  font-family: "Manrope", sans-serif !important; /* Swapped to Manrope */
  font-size: 22px; /* Increased from 20px for better readability */
  color: #ffffff;
  font-weight: 400;
  line-height: 1.7;
  margin: 0 0 30px 0;
  text-align: justify;
  max-width: 610px;
}

.combo-main-text strong {
  font-weight: 700 !important;
  color: #ffffff !important;
}

.combo-cards-wrapper {
  display: flex;
  gap: 20px;
}

.combo-white-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 20px;
  flex: 1;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.card-title {
  font-family: "Manrope", sans-serif !important;
  font-size: 20px;
  font-weight: 700 !important;
  color: #1c1c1c;
  /* Increased bottom margin from 10px to 24px for better spacing */
  margin: 0 0 24px 0 !important;
  text-transform: none !important;
}

.card-desc {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px;
  font-weight: 400 !important;
  color: #555555;
  /* Added the wider line padding to match the main text */
  line-height: 2;
  margin: 0;
}

/* Responsive Stack for Mobile */
@media (max-width: 950px) {
  .combo-pink-box {
    flex-direction: column;
    padding: 40px 20px;
  }
  .combo-cards-wrapper {
    flex-direction: column;
  }
  
  .combo-main-text{
      font-size: 16px;
  }
  
  .combo-graphic-title{
      font-size: 22px;
      margin-top: -35px;
  }
  
  .spike {
  position: absolute;
  width: 40px;
  height: auto;
  z-index: 2;
}

.spike-1 {
  top: 50px;
  left: 160px;
  transform: rotate(-10deg);
}

.spike-2 {
  top: 4px;
  left: 155px;
  transform: rotate(-10deg);
}

.spike-3 {
  top: -30px;
  left: 130px;
  transform: rotate(-10deg);
}
}

/* ==============================
   TEXT-BASED SCROLLING TICKER
============================== */
.ticker-section {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 20px auto 0 auto;
  padding: 30px 40px;
  display: flex;
  align-items: center;
  z-index: 10;
}

/* Edge-to-Edge Yellow Background */
.ticker-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background-color: #fbc220;
  z-index: -1;
}

.ticker-container {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 60px;
}

/* Static Left Title */
.ticker-static {
  flex-shrink: 0;
  z-index: 5;
}

.ticker-static h2 {
  font-family: "Fredoka One", cursive !important;
  font-size: 26px;
  font-weight: 300 !important;
  color: #1c1c1c;
  margin: 0;
  text-transform: none !important;
  white-space: nowrap;
  line-height: 1.2;
}

/* Scrolling Right Track */
.ticker-scroll-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: scrollTextTicker 20s linear infinite;
}

.ticker-text-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* The Scrolling Text Styling */
.ticker-text-group span {
  font-family: "Manrope", sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  color: #1c1c1c;
  line-height: 1.2;
}

/* The Bullet Point Separators */
.ticker-dot {
  margin: 0 40px;
  font-size: 30px !important;
}

@keyframes scrollTextTicker {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .ticker-section {
    padding: 20px;
  }
  .ticker-container {
    gap: 30px;
  }
  .ticker-static h2 {
    font-size: 28px;
  }
  .ticker-text-group span {
    font-size: 20px;
  }
  .ticker-dot {
    margin: 0 25px;
  }
}

/* ==============================
   KNOW WHAT YOU CONSUME SECTION
============================== */
.consume-section {
  position: relative;
  width: 100%;
  padding: 50px 20px 100px 20px;
  background-color: #fdfbf5;
}

.consume-container {
  max-width: 1350px;
  margin: 0 auto;
  
}

.consume-green-box {
  background-color: #58663e;
  border-radius: 40px;
  padding: 120px 40px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 25px 40px rgba(88, 102, 62, 0.15);
}

/* --- IMAGES --- */
.consume-img {
  position: absolute;
  z-index: 1;
  height: auto;
}

/* --- NEW SIDE IMAGES --- */
.img-new-left {
  width: 420px;
  left: -40px;
  bottom:-110px;
}

.img-new-right {
  width: 420px;
  right: -55px;
  top: 75%;
  transform: translateY(-50%); /* Centers it perfectly on the right edge */
}

/* --- CENTER TEXT CONTENT --- */
.consume-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 700px;
}

.consume-title {
  font-family: "Fredoka One", cursive !important;
  font-size: 54px;
  font-weight: 700 !important;
  color: #ffffff;
  margin: 0 0 20px 0;
  line-height: 1.2;
  text-transform: none !important;
}

.consume-yellow-text {
  color: #fbc220;
}

.consume-subtitle {
  font-family: "Manrope", sans-serif !important;
  font-size: 22px;
  font-weight: 200 !important;
  color: #ffffff;
  margin: 0 0 50px 0;
  line-height: 1.5;
}

.consume-btn {
  display: inline-block;
  background-color: #fbc220;
  color: #8c5535 !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  padding: 18px 50px;
  border-radius: 50px;
  transition:
    transform 0.2s,
    opacity 0.2s;
}

.consume-btn:hover {
  transform: translateY(-3px);
  opacity: 0.95;
}

@media (max-width: 900px) {
  .consume-title {
    font-size: 38px;
  }
  .consume-subtitle {
    font-size: 18px;
  }
  .consume-green-box {
    padding: 80px 20px;
  }
  .img-left-yellow,
  .img-right-pink {
    display: none;
  }
  .img-left-pink {
    width: 180px;
    left: -20px;
    bottom: -10px;
  }
  .img-right-yellow {
    width: 200px;
    right: -20px;
    top: 250px;
  }
}

/* ==============================
   SINGLE PRODUCT HERO
============================== */
.custom-product-page {
  background-color: #fdfbf5;
  padding: 100px 20px 100px 20px; /* Increased top padding from 40px to 140px to clear fixed navbars */
  font-family: "Fredoka One", cursive;
}

/* 1. Force the page to take full width so centering works */
main.custom-product-page {
    width: 100% !important;
    display: block !important;
    overflow-x: hidden !important;
}

/* 2. Create the perfectly centered island */
main.custom-product-page .product-hero-container {
    max-width: 1400px !important;
    margin: 40px auto !important;
    width: 95% !important;
    padding: 0 20px !important;
}

.breadcrumbs {
  font-family: "Manrope", sans-serif !important;
  font-weight: 400 !important;
  font-size: 14px;
  color: #888888;
  margin-bottom: 40px;
}

.breadcrumbs strong {
  font-family: "Manrope", sans-serif !important;
  color: #1c1c1c;
}

/* 3. Put the image and text side-by-side */
main.custom-product-page .product-hero-split {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 100px !important;
}

/* 4. Lock Image Box Size */
main.custom-product-page .product-left-col {
    width: 550px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: block !important;
}

/* Specific spacing for the Comfort 6 layout */
main.custom-product-page .comfort-left-col .image-pink-bg {
  background-color: #FFF0F3 !important;
  border-radius: 40px !important;
  padding-top: 50px !important;
  margin-left: 30px;
  margin-right: -40px;
  padding-bottom: 50px;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

main.custom-product-page .image-pink-bg {
  background-color: #FFF0F3 !important;
  border-radius: 40px !important;
  padding: 0 10px 0 10px;
  margin: 30px 0; /* Fixed previously invalid syntax here */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

main.custom-product-page .main-product-img {
  width: 90% !important;
  max-width: 480px !important;
  height: auto !important;
  transform: rotate(-15deg) !important;
}

/* 5. Lock Text Box Size */
main.custom-product-page .product-right-col {
    width: 550px !important;
    margin-top: 0 !important; /* Removed massive 190px margin, letting flexbox naturally center */
    max-width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    text-align: left !important;
    padding-right: 0 !important; 
}

/* Override spacing for the Comfort 6 layout */
main.custom-product-page .comfort-right-col {
    margin-top: 0 !important; 
}

.product-right-col .product-title {
  font-family: "Fredoka One", cursive !important;
  font-size: 38px;
  color: #fa3558;
  margin-top: 0 !important; /* Removed massive -230px negative margin */
  margin-bottom: 30px;
  font-weight: 400 !important;
  text-transform: none !important;
}

.product-short-desc {
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 20px;
  font-size: 14px;
  color: #555555;
  font-weight: 400; 
  line-height: 2.1;
  margin: 0;
}

.product-reviews-summary {
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.product-reviews-summary .stars {
  font-size: 20px; 
  letter-spacing: 2px;
  color: #FFB800; /* Adding gold color for stars */
}

.product-reviews-summary .rating-number {
  font-size: 18px;
  font-weight: 700;
  color: #1c1c1c;
}

.product-reviews-summary .review-count {
  font-size: 16px;
  color: #555;
}

/* Pricing Row */
.product-price-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
}

.woo-custom-price .price {
  font-family: "Manrope", sans-serif !important;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 0;
}

.woo-custom-price del,
.woo-custom-price del span.amount {
  font-family: "Manrope", sans-serif !important;
  color: #999999;
  font-size: 28px;
  font-weight: 400;
}

.woo-custom-price ins,
.woo-custom-price ins span.amount {
  font-family: "Manrope", sans-serif !important;
  color: #1c1c1c;
  font-size: 38px !important;
  font-weight: 700;
  text-decoration: none;
}

.shipping-badge {
  background-color: #c8e6c9;
  color: #2e7d32;
  padding: 0px 24px;
  border-radius: 20px;
  font-size: 14px;
}

/* Tags / Pills */
.ingredients-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 12px;
  margin-top: 10px;
}

.ingredients-pills .pill {
  font-family: "Manrope", sans-serif !important;
  background-color: #fcdcc2;
  color: #1c1c1c;
  padding: 8px 24px; 
  border-radius: 20px; 
  font-size: 14px;
  font-weight: 600;
}

.allergen-warning {
  font-family: "Manrope", sans-serif !important;
  color: #fa3558;
  font-size: 14px;
  font-weight: 500;
  margin: 15px 0;
}

/* Re-styled direct Add to Cart Link/Button */
.add-to-cart-btn.main-btn {
  font-family: "Manrope", sans-serif !important;
  background-color: #fa3558 !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  padding: 16px 40px !important;
  border-radius: 12px !important;
  border: none !important;
  width: 65% !important; /* Kept the 65% width constraint */
  margin-top: 10px;
  text-transform: capitalize !important;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  box-sizing: border-box;
}

.add-to-cart-btn.main-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(250, 53, 88, 0.3);
}

/* Product Variation Gallery Styles (from screenshots) */
.product-variation-gallery {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.variation-link {
    display: block;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 5px;
    transition: border-color 0.2s;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.variation-link img {
    width: 60px;
    height: auto;
    object-fit: contain;
}

.variation-link.active-variation {
    border-color: #fa3558; /* Highlight active product */
}

/* Mobile responsiveness */
@media (max-width: 900px) {
    main.custom-product-page .product-hero-split {
        flex-direction: column !important;
        gap: 40px !important;
    }
    main.custom-product-page .product-left-col,
    main.custom-product-page .product-right-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    .product-right-col .product-title {
        font-size: 32px;
        margin-top: 0;
    }
    .add-to-cart-btn.main-btn {
        width: 100% !important;
    }
}

/* =======================================
   BULLETPROOF NUTRITION BENEFITS 
======================================= */
.nutrition-benefits-section {
    max-width: 1400px !important;
    margin: 80px auto 60px auto !important;
    padding: 0 20px !important;
    width: 95% !important;
}

.benefits-pink-box {
    background-color: #FCEFEA !important;
    border-radius: 32px !important;
    padding: 80px 60px !important;
    text-align: center !important;
    width: 100% !important;
}

.benefits-main-title {
    font-family: 'Arlette Heavy', sans-serif !important;
    font-size: 32px !important;
    color: #FA3558 !important;
    margin: 0 0 50px 0 !important;
    font-weight: 400 !important;
    text-transform: none !important;
    font-style: normal !important; /* Forces the theme to stop italicizing */
}

.benefits-main-title span{
    font-family: 'Fredoka One', cursive !important;
    font-weight: 400 !important;
}

.benefits-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 50px !important;
}

.benefit-card {
    background-color: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 60px 40px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.03) !important;
}

.benefit-icon {
    height: 140px !important;
    width: auto !important;
    margin-bottom: 30px !important;
    object-fit: contain !important;
}

.benefit-title {
    font-family: 'Fredoka One', cursive !important;
    font-size: 22px !important;
    color: #FA3558 !important;
    margin: 0 0 15px 0 !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    font-style: normal !important; /* Forces the theme to stop italicizing */
    text-transform: none !important;
}

.benefit-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    color: #E26674 !important; 
    line-height: 1.7 !important;
    margin: 0 !important;
    font-weight: 500 !important;
    font-style: normal !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .benefits-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .benefits-pink-box {
        padding: 40px 20px !important;
    }
    .benefits-main-title {
        font-size: 26px !important;
        margin-bottom: 30px !important;
    }
}

/* =======================================
   PRODUCT DESCRIPTION SECTION
======================================= */
.product-description-section {
    width: 100% !important;
    background-color: #FDFBF5 !important;
    padding: 30px 0 !important;
}

/* Bring the text section inward for better readability */
.description-container {
    max-width: 1250px !important; /* Reduced from 1400px to indent it visually */
    margin: 0 auto !important;
    padding: 0 60px !important; /* Increased from 40px to push it away from the edges */
    width: 100% !important;
}

.description-title {
    font-family: 'Fredoka One', cursive !important;
    font-size: 32px !important;
    text-transform: capitalize !important;
    color: #1C1C1C !important;
    margin-bottom: 40px !important;
    font-weight: 400 !important;
}

.description-list {
    list-style-type: disc !important;
    padding-left: 20px !important;
    margin: 0 !important;
}

.description-list li {
    margin-bottom: 22px !important;
    color: #1C1C1C !important;
}

.description-list li::marker {
    color: #4A4A4A !important;
}

.desc-heading {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1C1C1C !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.5px !important;
}

.description-list p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #4A4A4A !important;
    line-height: 1.8 !important;
    margin: 0 !important;
}

.description-list p strong {
    font-weight: 700 !important;
    color: #1C1C1C !important;
}

.description-disclaimer {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    color: #1C1C1C !important;
    margin-top: 40px !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .product-description-section {
        padding: 50px 0 !important;
    }
    .description-container {
        padding: 0 20px !important; /* Relaxes the heavy padding on small screens */
    }
    .description-title {
        font-size: 28px !important;
    }
}

/* =======================================
   USAGE INSTRUCTIONS (CONTAINED CARD)
======================================= */
.usage-image-section {
    max-width: 1400px !important; /* Locks the pink box to our standard width */
    width: 95% !important; /* Ensures there is always a small gap on the screen edges */
    margin: 60px auto 0 auto !important; /* Centers the whole pink block */
    padding: 40px !important; /* Adds breathing room between the image and the pink edges */
    background-color: #E3294E !important;
    border-radius: 32px !important; /* Matches the nice rounded corners of the benefits section */
    display: flex !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.usage-full-width-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .usage-image-section {
        padding: 20px !important; /* Less padding on phones */
        border-radius: 20px !important;
    }
}

/* =======================================
   CUSTOMER REVIEWS SECTION
======================================= */
.product-reviews-section {
    width: 100% !important;
    background-color: #FDFBF5 !important;
    padding: 80px 0 !important;
}

.reviews-container {
    max-width: 1300px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Header Area */
.reviews-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 50px !important;
}

.reviews-main-title, .reviews-overall-score {
    font-family: 'Fredoka One', cursive !important;
    font-size: 38px !important;
    text-transform: capitalize !important;
    color: #1C1C1C !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Review Cards */
.review-card {
    background-color: #FFFFFF !important;
    border-radius: 20px !important;
    padding: 40px 50px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02) !important;
}

/* User Info & Avatar Placeholders */
.review-user-info {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
}

.review-avatar {
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    color: #FFF !important;
    font-size: 18px !important;
}
.avatar-orange { background-color: #E2805A !important; }
.avatar-blue { background-color: #2F4858 !important; }

.review-author {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    color: #1C1C1C !important;
    font-size: 16px !important;
}

/* Ratings & Headings */
.review-rating-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 8px !important;
}

.review-stars {
    color: #B4C086 !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
}

.review-heading {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #586940 !important;
    margin: 0 !important;
}

/* Meta Data */
.review-meta {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #7A7A7A !important;
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.meta-dot {
    font-size: 10px !important;
}

.verified-badge {
    color: #6C7A3C !important;
    font-weight: 700 !important;
}

/* Review Body */
.review-body {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #4A4A4A !important;
    margin: 0 0 30px 0 !important;
}

/* Actions Area */
.review-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important; /* This forces the buttons to the right edge */
    gap: 20px !important;
    border-top: 1px solid #F0F0F0 !important;
    padding-top: 20px !important;
}

.helpful-count {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: #999 !important;
    margin-right: auto !important;
}

.btn-helpful {
    font-family: 'Manrope', sans-serif !important;
    background-color: #EFEFDF !important;
    color: #586940 !important;
    border: none !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.btn-report {
    font-family: 'Manrope', sans-serif !important;
    background: none !important;
    border: none !important;
    color: #999 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Footer Link */
.reviews-footer {
    text-align: right !important;
    margin-top: 20px !important;
}

.all-reviews-link {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    color: #1C1C1C !important;
    text-decoration: underline !important;
    font-weight: 500 !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .reviews-container { padding: 0 20px !important; }
    .review-card { padding: 30px 20px !important; }
    .reviews-header { margin-bottom: 30px !important; }
    .reviews-main-title, .reviews-overall-score { font-size: 32px !important; }
    .review-rating-row { flex-direction: column; align-items: flex-start; gap: 5px; }
    .review-actions { flex-wrap: wrap; }
    .helpful-count { width: 100%; margin-bottom: 10px; }
}

/* =======================================
   STAY IN THE FLO SECTION
======================================= */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700&display=swap');

.stay-in-flo-section {
    width: 100% !important;
    padding: 40px 0 30px 0 !important;
    background-color: #FDFBF5 !important;
}

.stay-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.stay-main-title {
    font-family: 'Fredoka One', cursive !important;
    text-transform: capitalize !important;
    font-size: 36px !important;
    color: #1C1C1C !important;
    margin-bottom: 50px !important;
    font-weight: 400 !important;
}

.stay-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
}

/* Generic Card Styles */
.flo-card {
    border-radius: 32px !important;
    padding: 50px 40px 40px 40px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.flo-card-image-wrap {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 40px !important;
    flex-grow: 1 !important;
}

.flo-product-img {
    max-width: 90% !important;
    height: auto !important;
    object-fit: contain !important;
}

.flo-card-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    width: 100% !important;
}

.flo-info-left {
    flex: 1 !important;
    padding-right: 20px !important;
}

.flo-info-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    min-width: 150px !important;
}

/* Typography - LORA FONT */
.flo-product-title {
    font-family: 'Lora', serif !important;
    font-size: 20px !important;
    text-transform: none !important;
    color: #1C1C1C !important;
    margin: 0 0 15px 0 !important;
    font-weight: 700 !important;
}

.flo-product-desc {
    font-family: 'Manrope', serif !important;
    font-size: 14px !important;
    color: #4A4A4A !important;
    margin: 0 0 10px 0 !important;
    line-height: 1.4 !important;
}

.flo-product-bullets {
    font-family: 'Manrope', serif !important;
    font-size: 14px !important;
    color: #4A4A4A !important;
    margin: 0 !important;
    padding-left: 18px !important;
}

.flo-product-bullets li {
    margin-bottom: 5px !important;
}

.flo-pack-size {
    font-family: 'Lora', serif !important;
    font-size: 18px !important;
    color: #4A4A4A !important;
    margin-bottom: 5px !important;
}

.flo-price {
    font-family: 'Lora', serif !important;
    font-size: 42px !important; 
    font-weight: 100 !important;
    color: #1C1C1C !important;
    /* This massive margin pushes the text up and away from the Add to Cart button */
    margin-bottom: 45px !important; 
    line-height: 1 !important; 
}

.flo-add-btn {
    background-color: #FFC72C !important;
    color: #1C1C1C !important;
    font-family: 'Lora', serif !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: opacity 0.2s !important;
}
.flo-add-btn:hover { opacity: 0.9 !important; }

/* Card 1: Comfort 6 */
.comfort-card {
    background-color: #FCEAE5 !important;
}

/* Card 2: Savoury */
.savoury-card {
    background-color: #D3D3D3 !important;
}

.savoury-img {
    max-width: 70% !important;
    transform: rotate(15deg) !important;
}

/* =======================================
   SAVOURY CARD 'NEW' BADGE
======================================= */
.savoury-badge-wrapper {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 160px !important;
    height: auto !important;
    z-index: 5 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.savoury-new-band-bg {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

.savoury-new-text {
    position: absolute !important;
    top: 35px !important;
    right: 30px !important;
    font-family: 'Lora', serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1C1C1C !important;
    letter-spacing: 2px !important;
    transform: rotate(45deg) !important;
}

.flo-coming-soon {
    font-family: 'Lora', serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1C1C1C !important;
    margin-top: 10px !important;
}

/* Rotates the single bar in the related products card to match the hero style */
.slanted-card-img {
    transform: rotate(-15deg) !important;
    max-width: 60% !important;
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
    .stay-cards-grid { grid-template-columns: 1fr !important; }
    .flo-card-content { flex-direction: column !important; align-items: flex-start !important; }
    .flo-info-right { align-items: flex-start !important; text-align: left !important; margin-top: 20px !important; }
    .stay-container { padding: 0 20px !important; }
}

/* =======================================
   COMFORT 6 SPECIFIC OVERRIDES
======================================= */

/* 1. Expand the pink box for the 6-pack */
main.custom-product-page .comfort-left-col {
    width: 650px !important;
    max-width: 100% !important;
}

/* 2. Make the 6-pack image scale up inside the bigger box */
main.custom-product-page .comfort-img {
    transform: none !important;
    max-width: 580px !important;
    width: 100% !important;
    height: auto !important;
}

/* =======================================
   BULLETPROOF HERO STYLES (OVERRIDE THEME)
======================================= */

main.custom-product-page h1.product-title {
    font-family: 'Fredoka One', cursive !important;
    font-size: 42px !important;
    color: #FA3558 !important;
    font-weight: 400 !important;
    font-style: normal !important;
    text-transform: none !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
}

main.custom-product-page .product-short-desc {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #4A4A4A !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

main.custom-product-page .ingredients-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

main.custom-product-page .pill {
    background-color: #fcdcc2;
    color: #1c1c1c;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

main.custom-product-page .add-to-cart-btn {
    background-color: #FA3558 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    text-align: center;
    font-size: 18px !important;
    padding: 15px 40px !important;
    border-radius: 30px !important;
    border: none !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    display: inline-block !important;
}

/* =======================================
   COMFORT 6 HERO REFINEMENTS
======================================= */

/* 1. Reviews row */
main.custom-product-page .product-reviews-summary {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}
main.custom-product-page .product-reviews-summary .stars {
    color: #FFC72C !important;
    font-size: 24px !important;
    margin-top: -40px;
    letter-spacing: 2px !important;
}
main.custom-product-page .product-reviews-summary .half-star {
    color: #D3D3D3 !important;
}
main.custom-product-page .product-reviews-summary .rating-number {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: -40px;
    color: #1C1C1C !important;
}
main.custom-product-page .product-reviews-summary .review-count {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    margin-top: -40px;
    color: #4A4A4A !important;
}

/* 2. Price row */
main.custom-product-page .product-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
}
main.custom-product-page .price-strikethrough {
    font-family: 'Manrope', sans-serif !important;
    font-size: 24px !important;
    color: #999999 !important;
    text-decoration: line-through !important;
}
main.custom-product-page .price-current {
    font-family: 'Manrope', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1C1C1C !important;
}
main.custom-product-page .shipping-badge {
    background-color: #B4C086 !important;
    color: #1C1C1C !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
}

/* 3. Ingredient pills */
main.custom-product-page .pill {
    background-color: #fcdcc2 !important;
    color: #1C1C1C !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-weight: 500 !important;
}

/* 4. Allergen copy */
main.custom-product-page .allergen-warning {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #FA3558 !important;
    margin-top: -5px !important;
    margin-bottom: 10px !important;
}

/* 5. Add to Cart button */
main.custom-product-page .add-to-cart-btn {
    background-color: #FA3558 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 15px 40px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 350px !important;
    text-transform: none !important;
}
/* =======================================
   STAY IN THE FLO - VERTICAL POSITIONING
======================================= */
/* Lifts the right column (price + button) up from the bottom edge */
.stay-in-flo-section .flo-info-right {
    transform: translateY(-35px) !important; /* Slides the entire block up by 35 pixels */
}

.flo-price {
    font-family: 'Lora', serif !important;
    font-size: 42px !important; 
    font-weight: 100 !important;
    color: #1C1C1C !important;
    /* This massive margin pushes the text up and away from the Add to Cart button */
    margin-bottom: 45px !important; 
    line-height: 1 !important; 
}

body.woocommerce-cart,
body.woocommerce-cart .site-content,
body.woocommerce-cart .ast-container {
    background-color: #FAF8F5 !important;
}

body.woocommerce-cart .woocommerce {
    max-width: 1200px !important;
    margin: 40px auto 80px auto !important;
    padding: 0 40px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 50px !important;
}

body.woocommerce-cart header.entry-header,
body.woocommerce-cart .ast-archive-description {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 20px !important;
}

body.woocommerce-cart h1.entry-title,
body.woocommerce-cart h1.page-title {
    font-family: 'Fredoka One', cursive !important;
    font-size: 72px !important;
    color: #1C1C1C !important;
    font-weight: 400 !important;
    margin: 0 !important;
    display: block !important;
    text-align: left !important;
    text-transform: capitalize !important;
}

body.woocommerce-cart .woocommerce-cart-form {
    width: 60% !important;
}

.woocommerce table.shop_table {
    border: none !important;
    border-collapse: collapse !important;
    width: 100% !important;
    table-layout: auto !important;
}

.woocommerce table.shop_table th {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #999 !important;
    border: none !important;
    border-bottom: 2px solid #EAEAEA !important;
    padding: 15px 10px !important;
    letter-spacing: 1px !important;
    text-align: left !important;
}

.woocommerce table.shop_table td {
    border: none !important;
    border-bottom: 1px solid #EAEAEA !important;
    padding: 25px 10px !important;
    vertical-align: middle !important;
    background: transparent !important;
}

.woocommerce table.cart .product-thumbnail {
    width: 100px !important;
    padding-right: 20px !important;
}

.woocommerce table.cart .product-thumbnail img {
    width: 80px !important;
    max-width: 80px !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 4px !important;
    display: block !important;
}

.woocommerce table.cart .product-name a {
    font-family: 'Lora', serif !important;
    font-size: 18px !important;
    font-style: italic !important;
    color: #1C1C1C !important;
    text-decoration: none !important;
}

.woocommerce table.cart a.remove {
    color: #999 !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    background: #EAEAEA !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 22px !important;
    text-align: center !important;
    display: inline-block !important;
}

.woocommerce table.cart a.remove:hover {
    background: #FA3558 !important;
    color: #FFF !important;
}

.woocommerce .actions {
    padding: 30px 0 !important;
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
}

.woocommerce .actions .coupon {
    display: flex !important;
    gap: 15px !important;
}

.woocommerce .actions .coupon input.input-text {
    padding: 12px 20px !important;
    border: 1px solid #CCC !important;
    border-radius: 4px !important;
    font-family: 'Manrope', sans-serif !important;
    width: 200px !important;
    background: #FFF !important;
}

.woocommerce .actions button.button {
    background-color: #FA3558 !important;
    color: #FFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 12px 24px !important;
    text-transform: uppercase !important;
    border: none !important;
}

.woocommerce .actions button[name="update_cart"] {
    background-color: transparent !important;
    color: #1C1C1C !important;
    border: 1px solid #FA3558 !important;
}

body.woocommerce-cart .cart-collaterals {
    width: 35% !important;
    display: flex !important;
    flex-direction: column !important;
    margin-top: 0 !important;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals,
body.woocommerce-cart .cart-collaterals .cart_totals {
    background-color: #F8DFD6 !important;
    padding: 40px !important;
    width: 100% !important;
    border: none !important;
    border-radius: 8px !important; 
}

body.woocommerce-cart .cart_totals h2 {
    background: transparent !important;
    font-family: 'Fredoka One', cursive !important;
    font-size: 32px !important;
    margin-bottom: 30px !important;
    color: #1C1C1C !important;
    text-transform: capitalize !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
}

body.woocommerce-cart .cart_totals table.shop_table {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
}

body.woocommerce-cart .cart_totals table.shop_table tr th,
body.woocommerce-cart .cart_totals table.shop_table tr td {
    background: transparent !important;
}

body.woocommerce-cart .cart_totals table.shop_table th {
    font-family: 'Manrope', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #555555 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 20px 0 !important;
    text-align: left !important;
    font-weight: 600 !important;
    vertical-align: middle !important;
}

body.woocommerce-cart .cart_totals table.shop_table td {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #1C1C1C !important;
    font-weight: 700 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
    padding: 20px 0 !important;
    text-align: right !important;
    vertical-align: middle !important;
}

body.woocommerce-cart .cart_totals .order-total th,
body.woocommerce-cart .cart_totals .order-total td {
    border-bottom: none !important;
}

body.woocommerce-cart .cart_totals .order-total th {
    padding-top: 30px !important;
    vertical-align: top !important;
}

body.woocommerce-cart .cart_totals .order-total td {
    padding-top: 30px !important;
}

body.woocommerce-cart .cart_totals .order-total td strong {
    font-family: 'Lora', serif !important;
    font-size: 28px !important;
    color: #1C1C1C !important;
    display: block !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
}

body.woocommerce-cart .cart_totals .tax_label,
body.woocommerce-cart .cart_totals .includes_tax {
    font-family: 'Manrope', sans-serif !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    color: #666666 !important;
    text-transform: uppercase !important;
    display: block !important;
    margin-top: 5px !important;
}

.woocommerce-cart .wc-proceed-to-checkout {
    padding: 0 !important;
    margin: 30px 0 0 0 !important;
    position: relative !important;
    padding-bottom: 70px !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background-color: #FA3558 !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 18px !important;
    border-radius: 6px !important;
    display: block !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 5px 15px rgba(250, 53, 88, 0.2) !important;
    transition: opacity 0.2s !important;
    border: none !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    opacity: 0.9 !important;
}

.woocommerce-cart .wc-proceed-to-checkout::after {
    content: "COMPLIMENTARY SHIPPING ON ORDERS\A OVER 1000.\A SECURE CHECKOUT GUARANTEED.";
    white-space: pre-wrap !important;
    display: block !important;
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 9px !important;
    color: #666666 !important;
    line-height: 1.8 !important;
    margin-top: 25px !important;
    letter-spacing: 1px !important;
    position: absolute !important;
    width: 100% !important;
    left: 0 !important;
}

body.woocommerce-cart .cart-collaterals::before {
    content: "FAST DELIVERY WORLDWIDE" !important;
    order: 2 !important;
    display: block !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    color: #444444 !important;
    margin-top: 25px !important;
    letter-spacing: 1px !important;
    padding-left: 22px !important;
    background: url('https://staging.thehormoneessentials.com/wp-content/uploads/2026/05/truck.png') left center no-repeat !important;
    background-size: 12px auto !important;
    line-height: 14px !important;
}

body.woocommerce-cart .cart-collaterals::after {
    content: "SSL SECURED PAYMENT" !important;
    order: 3 !important;
    display: block !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 10px !important;
    color: #444444 !important;
    margin-top: 12px !important;
    letter-spacing: 1px !important;
    padding-left: 22px !important;
    background: url('https://staging.thehormoneessentials.com/wp-content/uploads/2026/05/lock.png') left center no-repeat !important;
    background-size: 10px auto !important;
    line-height: 14px !important;
}

@media (max-width: 900px) {
    body.woocommerce-cart .woocommerce {
        flex-direction: column !important;
        padding: 40px 20px !important;
    }
    body.woocommerce-cart .woocommerce-cart-form,
    body.woocommerce-cart .cart-collaterals {
        width: 100% !important;
    }
}

/* =======================================
   CUSTOM FLOBITES HEADER STYLES
======================================= */
.custom-flo-header {
  width: 100% !important;
  background-color: #faf8f5 !important;
  padding: 8px 0 !important; /* This slims down the bar */
  border-bottom: 1px solid #eaeaea !important;
  position: relative !important;
  z-index: 9999 !important;
}

.custom-flo-container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Logo */
.flo-logo-area {
    flex: 1 !important;
}

.flo-main-logo {
  max-width: 110px !important; /* Scaled down to fit the thinner bar */
  height: auto !important;
}

/* Navigation Links */
.flo-main-nav {
    flex: 2 !important;
    display: flex !important;
    justify-content: center !important;
}
.flo-main-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 40px !important;
}
.flo-main-nav a {
    text-decoration: none !important;
    color: #1C1C1C !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}
.flo-main-nav a:hover {
    color: #FA3558 !important;
}

/* Right Actions (Button & Cart) */
.flo-action-area {
    flex: 1 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 25px !important;
}

.header-shop-btn {
    background-color: #FA3558 !important;
    color: #FFFFFF !important;
    padding: 12px 30px !important;
    border-radius: 40px !important;
    text-decoration: none !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: opacity 0.3s ease !important;
    white-space: nowrap !important;
}
.header-shop-btn:hover {
    opacity: 0.8 !important;
    color: #FFFFFF !important;
}

.header-cart-link {
    display: flex !important;
    align-items: center !important;
    transition: opacity 0.2s ease !important;
}
.header-cart-link:hover {
    opacity: 0.7 !important;
}
.nav-cart-icon {
    width: 32px !important;
    height: auto !important;
}

/* Basic Mobile Responsiveness */
/* --- Base Container (Desktop) --- */
.custom-flo-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 20px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.flo-action-area {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* --- Mobile View (The Magic Grid) --- */
@media (max-width: 900px) {
    .custom-flo-container {
        display: grid !important;
        grid-template-columns: 1fr auto 1fr !important; /* 3 Columns */
        align-items: center !important;
        padding: 10px 20px !important;
    }

    /* 1. Locks Burger to the Left */
    .flo-burger-menu {
        display: flex !important;
        justify-self: start !important;
        margin: 0 !important;
    }

    /* 2. Locks Logo to the Center */
    .flo-logo-area {
        justify-self: center !important;
        display: flex !important;
    }

    /* 3. Locks Cart to the Right */
    .flo-action-area {
        justify-self: end !important;
        margin: 0 !important;
    }

    /* Hide Desktop Shop Button on Mobile */
    .header-shop-btn {
        display: none !important;
    }
}

/* =======================================
   ALL PRODUCTS PAGE - CENTERING ISLAND FIX
======================================= */

/* 1. Force the page to take full width */
main.flo-shop-main {
    background-color: #FAF8F5 !important;
    padding: 60px 0 100px 0 !important;
    min-height: 80vh !important;
    margin-top: 50px;
    width: 100% !important;
    display: block !important;
    overflow-x: hidden !important;
}

/* 2. Create the perfectly centered island */
.flo-shop-container {
    max-width: 1250px !important;
    margin: 0 auto !important;
    width: 100% !important;
    padding: 0 20px !important;
}

/* 3. Stretch the Header across the Island */
.flo-shop-header {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 50px !important;
}

.flo-shop-title {
    font-family: 'Fredoka One', cursive !important;
    text-transform: capitalize !important;
    font-size: 42px !important;
    color: #1C1C1C !important;
    margin: 0 !important;
}

/* --- Custom Wrapper for Dropdown --- */
.flo-sort-wrapper {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

/* --- The Select Dropdown Itself --- */
select.flo-sort-btn {
    background-color: #FA3558 !important;
    color: #FFF !important;
    border: none !important;
    border-radius: 30px !important;
    
    /* Increased right padding (45px) to keep text away from the arrow */
    padding: 12px 45px 12px 24px !important; 
    
    /* This pushes the arrow inward from the right edge. Increase 20px to move it further left */
    background-position: calc(100% - 20px) center !important; 
    background-repeat: no-repeat !important;
    
    font-family: 'Manrope', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    outline: none !important;
    display: block !important;
}

/* --- Dropdown Options --- */
select.flo-sort-btn option {
    background-color: #ffffff !important;
    color: #1c1c1c !important;
    font-weight: 500 !important;
}

/* --- Hide Our Custom Arrow --- */
.flo-sort-wrapper .sort-icon {
    display: none !important; 
}


/* 4. The Flex Container for the Cards */
.flo-products-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 60px !important;
}

/* 5. Lock the Card Sizes */
.flo-product-card {
    background-color: #F8E5E0 !important;
    border-radius: 24px !important;
    padding: 50px 45px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 550px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
}

.flo-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.card-stretched-link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 30px;
}

/* 6. Specific Image Sizing */
.flo-card-img-wrapper {
    min-height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
}

.flo-product-card:nth-child(1) .flo-card-img-wrapper img {
    max-width: 60% !important;
    transform: scale(1.15) !important;
}

.flo-product-card:nth-child(2) .flo-card-img-wrapper img {
    max-width: 60% !important;
    transform: scale(1.15) !important;
}

.flo-card-details {
    display: flex !important;
    
    justify-content: space-between !important;
    align-items: flex-end !important;
}

.flo-card-left {
    width: 60% !important;
}

.flo-card-left h2 {
    text-transform: none !important;
    font-family: 'Lora', serif !important;
    font-size: 24px !important;
    color: #1C1C1C !important;
    margin: 0 0 10px 0 !important;
}

.flo-card-left p {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #4A4A4A !important;
    margin: 0 0 15px 0 !important;
}

.flo-card-left ul {
    padding-left: 15px !important;
    margin: 0 !important;
}

.flo-card-left li {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    color: #4A4A4A !important;
    margin-bottom: 5px !important;
}

.flo-card-right {
    text-transform: none !important;
    width: 35% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
}

.flo-pack {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #1C1C1C !important;
    margin-bottom: 2px !important;
}

.flo-price {
    font-family: 'Fredoka One', cursive !important;
    font-size: 28px !important;
    color: #1C1C1C !important;
    margin-bottom: 15px !important;
}

.flo-add-btn {
    background-color: #FFC107 !important;
    color: #1C1C1C !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    text-align: center !important;
    display: inline-block !important;
    white-space: nowrap !important;
    transition: opacity 0.3s ease !important;
}

.flo-add-btn:hover {
    opacity: 0.8 !important;
}

@media (max-width: 900px) {
    /* 1. Stack header elements vertically */
    .flo-shop-header {
        margin-top: 100px;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
        margin-bottom: 30px !important;
    }

    .flo-sort-wrapper {
        margin-left: 0 !important; /* Remove right alignment */
        width: 100% !important;
    }

    select.flo-sort-btn {
        width: 100% !important; /* Make sort button full width on mobile */
    }

    /* 2. Change flex direction to stack cards */
    .flo-products-grid {
        flex-direction: column !important; /* Stacks items vertically */
        align-items: center !important;
        gap: 30px !important; /* Tighter gap between cards on mobile */
    }

    /* 3. Override the 550px width to fit the screen */
    .flo-product-card {
        width: 100% !important;
        max-width: 400px !important; /* Looks great on tablets and phones */
        padding: 30px 20px !important; /* Reduce thick padding for small screens */
    }

    /* 4. Scale images down so they don't break the container */
    .flo-card-img-wrapper {
        min-height: 220px !important;
        margin-bottom: 20px !important;
    }

    .flo-product-card:nth-child(1) .flo-card-img-wrapper img,
    .flo-product-card:nth-child(2) .flo-card-img-wrapper img {
        max-width: 80% !important;
        transform: scale(1) !important; /* Removes the 1.15 scale on mobile */
    }

    /* 5. Stack text details */
    .flo-card-details {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .flo-card-left, .flo-card-right {
        width: 100% !important;
        align-items: flex-start !important;
        text-align: left !important;
    }

    .flo-card-right {
        margin-top: 25px !important;
    }
    
    .flo-add-btn {
        width: 100% !important; /* Full width add-to-cart button */
        padding: 15px 24px !important;
    }
}


/* ==============================
   NUTRIENTS SECTION
============================== */
.nutrients-section {
    background-color: #fdfbf5;
    padding: 30px 20px 140px 20px;
    width: 100%;
    box-sizing: border-box;
}

.nutrients-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 60px auto;
}

.nutrients-main-title {
    font-family: 'Fredoka One', cursive !important;
    font-weight: 400 !important;
    font-size: 40px !important;
    color: #1C1C1C !important;
    margin: 0 0 20px 0 !important;
    text-transform: none !important;
}

.nutrients-subtitle {
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    color: #4A4A4A !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

.nutrients-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;
    max-width: 1400px;
    margin: 0 auto;
}

.nutri-card {
    border-radius: 34px;
    padding: 28px 12px 30px 28px;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;
}

/* Fading Background Gradients */
.card-iron { 
    background: linear-gradient(180deg, #FBECE8 0%, #FDF7F5 100%);
    margin-left: 20px;
}
.card-myo { 
    background: linear-gradient(180deg, #F6EEF8 0%, #FCFAFD 100%); 
    margin-right: 5px;
}
.card-mg { 
    background: linear-gradient(180deg, #FEF5D6 0%, #FEFBF0 100%);
    margin-right: 30px;
    
}

/* Top Graphics Row */
.nutri-card-top {
    display: flex;
    justify-content: flex-start;
    gap: 80px;
    align-items: flex-start;
    margin-bottom: 40px;
}

.element-badge {
    width: 100px;
    height: auto;
    object-fit: contain;
}

.deco-graphic {
    width: 140px;
    margin-top: -5px;
    margin-left: 5px;
    height: auto;
    object-fit: contain;
}

/* Typography */
.nutri-title {
    font-family: 'Lora', serif !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    margin: -10px 0 18px 0 !important;
    text-transform: none !important;
}

.nutri-desc {
    font-family: 'Manrope', sans-serif !important;
    margin-top: -20px;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    margin: 0 0 30px 0 !important;
}

/* Color specific text */
.iron-text { color: #B93735 !important; }
.myo-text { color: #624078 !important; }
.mg-text { color: #D69E29 !important; }

/* Bottom Features Row */
.nutri-features {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: -5px;
}

.nutri-feature {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
}

.nutri-feature img {
    width: 20px;
    flex-shrink: 0;
}

.nutri-feature span {
    font-family: 'Manrope', sans-serif !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
}

/* ==============================
   MOBILE RESPONSIVENESS
============================== */
@media (max-width: 1024px) {

    .nutrients-section {
        padding: 70px 16px 90px;
    }

    .nutrients-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 35px;
    }

    .nutrients-main-title {
        font-size: 28px !important;
        line-height: 1.1 !important;
        text-align: center !important;
    }

    .nutrients-subtitle {
        font-size: 14px !important;
        line-height: 1.5 !important;
        max-width: 300px !important;
        width: 100% !important;
        margin: 0 auto !important;
        text-align: center !important;
        display: block !important;
    }

    /* GRID LAYOUT */
    .nutrients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 420px;
    margin: 0 auto;
    }
    
    .card-iron {
        order: 2;
        margin: 0;
    }
    
    .card-mg {
        order: 3;
        margin: 0;
    }
    /* MYO CARD FULL WIDTH */
    .card-myo {
        order:1;
        grid-column: 1 / -1;
        margin: 0;
    }

    .card-iron {
        order: 3;
        margin: 0;
    }

    /* CARD */
    .nutri-card {
        min-height: auto;
        padding: 20px;
        border-radius: 28px;
    }

    /* TOP AREA */
    .nutri-card-top {
        gap: 18px;
        margin-bottom: 22px;
        align-items: center;
    }

    .element-badge {
        width: 70px;
    }

    .deco-graphic {
        width: 60px;
        margin-left: 0;
    }

    /* TYPOGRAPHY */
    .nutri-title {
        font-size: 26px !important;
        margin: 0 0 10px 0 !important;
        line-height: 1.1 !important;
    }

    .nutri-desc {
        font-size: 14px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
    }
    


    /* FEATURES */
    .nutri-features {
        gap: 14px;
        margin-top: 10px;
    }

    .nutri-feature {
        gap: 8px;
    }

    .nutri-feature img {
        width: 18px;
    }

    .nutri-feature span {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }
}


/* ==============================
   PRODUCT VARIATION GALLERY
============================== */
.product-variation-gallery {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.variation-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 90px;
  border: 2px solid #f0f0f0;
  border-radius: 12px;
  padding: 10px;
  background-color: #ffffff;
  transition: border-color 0.2s ease;
  text-decoration: none;
}

.variation-link img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.variation-link:hover {
  border-color: #dcdcdc;
}

.variation-link.active-variation {
  border-color: #fa3558;
}

.flo-blog-article-main {
    background-color: #faf8f5;
    padding: 120px 20px 60px; 
    min-height: 70vh;
    width: 100%;
    display: block;
}

.flo-article-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
    display: block;
}

.flo-article-header {
    margin-bottom: 40px;
}

.flo-article-title, 
.flo-content-title,
.flo-evidence-title {
    font-family: 'Lora', serif;
}

.flo-article-title {
    font-size: 48px;
    color: #111111;
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 500;
    text-transform: capitalize !important;
}

.flo-article-subtitle, 
.flo-article-meta, 
.flo-content-text {
    font-family: 'Manrope', sans-serif;
}

.flo-article-subtitle {
    font-size: 18px;
    color: #555555;
    line-height: 1.6;
    max-width: 700px;
    margin-bottom: 30px;
}

.flo-article-meta {
    font-size: 13px;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 12px;
}

.meta-dot {
    color: #aaaaaa;
    font-size: 16px;
}

.flo-article-image-placeholder {
    width: 100%;
    height: 450px;
    background-color: #c5baba;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flo-article-content {
    margin-top: 60px;
}

.flo-content-title {
    font-size: 32px;
    color: #111111;
    margin-bottom: 24px;
    font-weight: 500;
    text-transform: capitalize !important;
}

.flo-content-text {
    font-size: 16px;
    line-height: 1.8;
    color: #333333;
    margin-bottom: 40px;
}

.flo-article-image-placeholder-secondary {
    width: 100%;
    height: 400px;
    background-color: #c5baba;
    border-radius: 12px;
    margin-bottom: 40px;
}

.flo-article-evidence {
    margin-top: 60px;
    margin-bottom: 60px;
}

.flo-evidence-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.flo-evidence-indicator {
    width: 4px;
    height: 16px;
    background-color: #111111;
}

.flo-evidence-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #555555;
    text-transform: uppercase;
    margin: 0;
}

.flo-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.flo-evidence-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    text-align: left;
}

.flo-evidence-table th {
    background-color: #e8e8e8;
    color: #333333;
    font-weight: 600;
    padding: 16px 20px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.flo-evidence-table td {
    background-color: #f6f6f6;
    color: #333333;
    padding: 16px 20px;
    border-bottom: 4px solid #ffffff;
}

.flo-evidence-table tr:last-child td {
    border-bottom: none;
}

.flo-article-placeholder-spacer {
    height: 40px;
}

.flo-article-definitions {
    margin-top: 60px;
}

.flo-article-references {
    background-color: #f6f6f6;
    padding: 40px;
    margin-top: 60px;
    border-radius: 8px;
}

.flo-references-title {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 16px;
}

.flo-references-list p {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #666666;
    line-height: 1.6;
    margin-bottom: 16px;
}

.flo-references-list p:last-child {
    margin-bottom: 0;
}

.flo-promo-section {
    margin-top: 80px;
    background-color: #506b3d;
    border: 6px solid #f8bf24;
    border-radius: 20px;
    padding: 60px 40px;
    overflow: hidden;
}

.flo-promo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
}

.flo-promo-left {
    flex: 1;
    max-width: 50%;
}

.flo-promo-sub {
    font-family: 'Lora', serif !important;
    font-weight: 400;
    font-size: 36px;
    color: #ffffff;
    margin: 0 0 5px 0;
    text-transform: none !important;
}

.flo-promo-main {
    font-family: 'Fredoka One', display !important;
    font-weight: 400;
    font-size: 44px;
    color: #ffffff;
    margin: 0 0 20px 0;
    line-height: 1.1;
    letter-spacing: 0.5px;
    text-transform: none !important;
}

.flo-promo-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 30px;
}

.flo-promo-btn {
    font-family: 'Manrope', sans-serif;
    background-color: #f8bf24;
    color: #111111;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.flo-promo-btn:hover {
    background-color: #e5af1d;
}

.flo-promo-right {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.flo-promo-card-title {
    font-family: 'Lora', serif !important;
    font-size: 24px;
    color: #ffffff;
    margin: 0;
    text-align: left;
    text-transform: none !important;
    position: relative;
    top: 50px;
    left: 30px;
    z-index: 10;
}

.flo-promo-card-layout {
    display: flex;
    align-items: center;
}

.flo-promo-yellow-card {
    background-color: #f8bf24;
    border-radius: 30px;
    padding: 35px 80px 35px 35px;
    margin-right: -70px;
    position: relative;
    z-index: 1;
    flex: 1;
}

.flo-promo-card-desc {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #333333;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.flo-promo-list {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    color: #333333;
    padding-left: 20px;
    margin-bottom: 12px;
}

.flo-promo-list li {
    margin-bottom: 4px;
}

.flo-promo-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.flo-promo-add-btn {
    font-family: 'Manrope', sans-serif;
    background-color: #8d573f;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 12px 20px;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.flo-promo-add-btn:hover {
    background-color: #784832;
}

.flo-promo-price-box {
    display: flex;
    flex-direction: column;
}

.flo-promo-pack {
    font-family: 'Manrope', sans-serif;
    font-size: 14px;
    color: #333333;
}

.flo-promo-price {
    font-family: 'Manrope', sans-serif;
    font-size: 22px;
    font-weight: 800;
    color: #111111;
}

.flo-promo-img {
    height: 460px;
    object-fit: contain;
    position: relative;
    z-index: 2;
    margin-top: 10px;
}

@media (max-width: 992px) {
    .flo-promo-container {
        flex-direction: column;
    }
    .flo-promo-left {
        max-width: 100%;
    }
    .flo-promo-yellow-card {
        margin-right: -40px;
        padding: 20px 30px 20px 20px;
    }
    .flo-promo-img {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .flo-article-title {
        font-size: 36px;
    }
    .flo-article-subtitle {
        font-size: 16px;
    }
    .flo-article-image-placeholder {
        height: 250px;
    }
    .flo-content-title {
        font-size: 28px;
    }
    .flo-content-text {
        font-size: 15px;
    }
    .flo-article-image-placeholder-secondary {
        height: 250px;
    }
    .flo-evidence-table th, 
    .flo-evidence-table td {
        padding: 12px 15px;
        font-size: 13px;
    }
    .flo-article-references {
        padding: 24px;
    }
    .flo-promo-card-layout {
        flex-direction: column;
        align-items: flex-start;
    }
    .flo-promo-yellow-card {
        margin-right: 0;
        margin-bottom: -40px;
        width: 100%;
        padding-bottom: 60px;
    }
    .flo-promo-img {
        height: 200px;
        margin: 0 auto;
    }
    .flo-promo-card-title {
        top: 0;
        left: 0;
        margin-bottom: 20px;
    }
}

.site-footer .ast-builder-social-element svg,
.site-footer .ast-builder-social-element img,
.site-footer .ast-builder-social-element .social-item-icon,
.site-footer .ast-social-icon,
.site-footer .elementor-social-icon svg,
.site-footer .elementor-social-icon img,
.site-footer .elementor-social-icon i,
.site-footer .wp-block-social-link svg,
.site-footer .wp-block-social-link img,
.site-footer .wp-block-social-link,
.site-footer [class*="social"] img,
.site-footer [class*="social"] svg,
.site-footer [class*="social"] i {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    font-size: 24px !important;
    line-height: 24px !important;
    object-fit: contain !important;
    display: inline-block !important;
}

.site-footer .ast-builder-social-element,
.site-footer .wp-block-social-links {
    gap: 15px !important;
}

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

img, picture, video, iframe, figure {
    max-width: 100% !important;
    height: auto;
}

* {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    h1 {
        font-size: 36px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 24px;
    }
    body, p, li {
        font-size: 16px;
        line-height: 1.6;
    } 
    .site-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

a.added_to_cart.wc-forward {
    display: none !important;
}

.woocommerce-notices-wrapper {
    position: fixed !important;
    bottom: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important; 
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;
}

.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    pointer-events: auto !important;
    background-color: #FA3558 !important;
    color: #ffffff !important;
    padding: 14px 28px !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 30px rgba(250, 53, 88, 0.3) !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 0 !important;
    white-space: nowrap !important;
    animation: slideUpToast 5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
    background-color: #ffffff !important;
    color: #FA3558 !important;
    padding: 8px 20px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: none !important;
    display: inline-block !important;
    transition: transform 0.2s ease !important;
}

.woocommerce-message a:hover {
    transform: scale(1.05) !important;
}

.woocommerce-message::before, 
.woocommerce-error::before, 
.woocommerce-info::before {
    display: none !important;
}

@keyframes slideUpToast {
    0% { transform: translateY(100px); opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    90% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; visibility: hidden; }
}

/* ==============================
   CART ADDITION TOAST POPUP
============================== */
.flo-cart-toast {
    position: fixed;
    bottom: -100px; /* Initially hidden below screen */
    left: 50%;
    transform: translateX(-50%);
    background-color: #FA3558;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(250, 53, 88, 0.3);
    z-index: 2147483647 !important; 
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.flo-cart-toast.show {
    bottom: 40px; /* Slide into view */
    opacity: 1;
    pointer-events: auto;
}

.toast-content {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'Manrope', sans-serif;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.toast-view-cart {
    background-color: #ffffff;
    color: #FA3558;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

.flo-add-cart-btn {
    position: relative !important;
    z-index: 50 !important;
}

.flo-add-cart-btn:hover {
    background-color: #f4b81a !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
}

.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    animation: slideUpToast 5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes slideUpToast {
    0% { transform: translateY(100px); opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    90% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100px); opacity: 0; visibility: hidden; }
}

/* =======================================
   CART ALIGNMENT & NAVBAR OVERLAP FIX
======================================= */

body.woocommerce-cart .woocommerce {
    margin-top: 140px !important; 
}

@media (min-width: 769px) {
    .woocommerce table.cart thead tr,
    .woocommerce table.cart tbody tr.cart_item {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .woocommerce table.cart .product-thumbnail { 
        order: 1 !important; 
        width: 12% !important; 
        text-align: left !important; 
    }
    
    .woocommerce table.cart .product-name { 
        order: 2 !important; 
        width: 38% !important; 
        text-align: left !important; 
        padding-left: 0 !important;
    }
    
    .woocommerce table.cart .product-price { 
        order: 3 !important; 
        width: 15% !important; 
        text-align: center !important; 
    }
    
    .woocommerce table.cart .product-quantity { 
        order: 4 !important; 
        width: 15% !important; 
        text-align: center !important; 
    }
    
    .woocommerce table.cart .product-subtotal { 
        order: 5 !important; 
        width: 15% !important; 
        text-align: right !important; 
        padding-right: 20px !important;
    }
    
    .woocommerce table.cart .product-remove { 
        order: 6 !important; 
        width: 5% !important; 
        text-align: right !important; 
        padding: 0 !important;
    }
    
    .woocommerce table.cart a.remove {
        margin-left: auto !important;
    }
    
    .woocommerce table.cart thead th.product-remove {
        color: transparent !important; 
    }
}

/* =======================================
   CART TITLE CLEARANCE & ROW HEIGHT FIX
======================================= */

/* Push the entire page content (including the title) down below the navbar */
/* Astra's Master Content Wrapper Override */
body.woocommerce-cart #content,
body.woocommerce-cart .site-content {
    margin-top: 80px !important; 
    padding-top: 40px !important;
}

/* Force the Cart Title itself down away from the header */
body.woocommerce-cart h1.entry-title,
body.woocommerce-cart h1.page-title,
body.woocommerce-cart .ast-archive-description {
    margin-top: 60px !important;
    padding-top: 20px !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Reset the WooCommerce wrapper margin so we don't have double spacing */
body.woocommerce-cart .woocommerce {
    margin-top: 20px !important;
}

/* Increase the vertical padding on the table cells to make the rows significantly taller */
.woocommerce table.shop_table td {
    padding: 65px 10px !important; 
}

.woocommerce table.shop_table td {
    border-bottom: none !important;
}

.woocommerce table.shop_table tbody tr.cart_item {
    border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}

.woocommerce table.cart .product-thumbnail img {
    max-height: 110px !important;
    width: auto !important;
    max-width: 80px !important;
    object-fit: contain !important;
}

.woocommerce table.shop_table thead th {
    border-bottom: none !important;
}

.woocommerce table.shop_table thead tr {
    border-bottom: 2px solid #EAEAEA !important;
    width: 100% !important;
}

@media (min-width: 769px) {
    .woocommerce table.cart .product-thumbnail {
        padding-right: 40px !important;
    }
    
    .woocommerce table.cart .product-name {
        padding-left: 25px !important;
    }
}

.footer-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important; 
    flex-wrap: wrap !important;
    gap: 40px !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.footer-column {
    display: flex !important;
    flex-direction: column !important;
}

.footer-main-logo {
    width: 130px !important;
    margin-bottom: 5px !important; 
}

.footer-by-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #7A7A7A !important;
    margin: 0 0 0 0 !important;
    font-weight: 500 !important;
}

.footer-tagline {
    margin-top: auto !important; 
    margin-bottom: 0 !important;
    max-width: 320px !important;
    color: #7A7A7A !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}

.footer-socials {
    margin-top: auto !important; 
    display: flex !important;
    gap: 15px !important;
}

@media (max-width: 768px) {
    .footer-tagline, .footer-socials {
        margin-top: 30px !important; 
    }
}

.ing-hardcoded-card {
    position: relative !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    height: 350px !important;
    padding: 0 !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.super-seeds .seeds-grid {
    align-items: center !important;
    gap: 20px !important;
    margin-top: 40px !important;
}

.super-seeds .seed-card:nth-child(even) {
    transform: translateY(-25px) !important;
}

.super-seeds .seed-card:nth-child(odd) {
    transform: translateY(25px) !important;
}

.super-seeds .seed-card:nth-child(even):hover {
    transform: translateY(-35px) !important;
}

.super-seeds .seed-card:nth-child(odd):hover {
    transform: translateY(15px) !important;
}

.ing-card-top {
    position: relative !important;
    width: 150px !important;
    height: 150px !important;
}

.ing-card-top .top-shape {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: top left !important;
    border-radius: 0 !important;
}

.ing-card-top h3 {
    position: relative !important;
    z-index: 5 !important;
    font-family: 'Fredoka One', cursive !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 25px 0 0 20px !important;
    text-align: left !important;
    text-transform: none !important;
}

.title-brown { color: #693b2a !important; }
.title-green { color: #455c30 !important; }

.ing-card-bottom {
    position: relative !important;
    width: 100% !important;
    min-height: 140px !important;
    display: flex !important;
    align-items: flex-end !important;
}

.ing-card-bottom .bottom-shape {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 80% !important;
    object-fit: cover !important; 
    z-index: 1 !important;
    border-radius: 0 !important;
}

.ing-card-bottom p {
    position: relative !important;
    z-index: 5 !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important; 
    color: #ffffff !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 15px 15px 20px 15px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .super-seeds .seed-card:nth-child(even),
    .super-seeds .seed-card:nth-child(odd) {
        transform: none !important;
    }
    .super-seeds .seed-card:hover {
        transform: translateY(-10px) !important;
    }
}


/* ==============================
   BLOG & ARCHIVE TITLE CASING (Title Case)
============================== */
.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.single-post .entry-title,
.ast-archive-description .ast-archive-title,
.flo-article-title {
    text-transform: capitalize !important;
}
.flo-content-title {
    text-transform: capitalize !important;
}

.flo-mini-cart-inner {
    position: absolute !important;
    top: 20px !important; 
    right: -800px !important; /* Hide wider box */
    width: 650px !important; /* FORCED WIDTH */
    max-width: 90vw !important; /* Safety for mobile */
    height: 65vh !important;     
    min-height: 520px !important; 
    background: #FAF8F5 !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important;
    border-radius: 16px !important; 
    transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
}

.flo-mini-cart-overlay.open .flo-mini-cart-inner {
    right: 20px !important; /* Pins securely to the top right */
}

.flo-mini-cart-overlay {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 999999 !important;
    transition: right 0s 0.4s !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.flo-mini-cart-overlay.open {
    right: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease !important;
}


body.flo-cart-open {
    overflow: hidden !important;
}

.flo-mini-cart-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 30px 40px 20px 40px !important;
    border-bottom: 2px solid #EAEAEA !important;
}

.mini-cart-title {
    font-family: 'Fredoka One', cursive !important;
    font-size: 26px !important;
    color: #1C1C1C !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

.mini-cart-title:hover {
    color: #FA3558 !important;
}

.close-cart-btn {
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    color: #999 !important;
    cursor: pointer !important;
    padding: 0 !important;
    line-height: 1 !important;
    transition: color 0.2s ease !important;
}

.close-cart-btn:hover {
    color: #FA3558 !important;
}

.flo-mini-cart-content {
    padding: 20px 40px !important;
    overflow-y: auto !important;
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.woocommerce-mini-cart {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-grow: 1 !important;
}

/* 1. Protect the Row Structure */
.woocommerce-mini-cart-item {
    position: relative !important;
    padding: 20px 170px 20px 100px !important; /* 100px left for image, 170px right for UI */
    min-height: 115px !important; 
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-bottom: 1px solid #EAEAEA !important;
}

/* 2. Pin the Image into the empty left space */
.woocommerce-mini-cart-item img {
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 75px !important;
    height: auto !important;
    max-height: 75px !important; 
    object-fit: cover !important;
    border-radius: 6px !important;
    margin: 0 !important;
}

/* 3. Format the Title Text */
.woocommerce-mini-cart-item a:not(.remove) {
    display: block !important;
    font-family: 'Lora', serif !important;
    font-size: 18px !important;
    color: #1C1C1C !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-bottom: 5px !important;
    padding: 0 !important;
}

/* 4. Format the Quantity Text */
.woocommerce-mini-cart-item .quantity {
    display: block !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.woocommerce-mini-cart-item .remove {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 0 !important; 
    color: transparent !important; /* Kills any lingering 'X' text */
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: 22px 22px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    width: 30px !important;
    height: 30px !important;
}

.woocommerce-mini-cart-item .flo-right-qty {
    position: absolute !important;
    right: 65px !important; /* Places it directly left of the trash can */
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

.woocommerce-mini-cart-item .remove:hover {
    background-color: transparent !important;
    /* Turns the trash can Pink on hover */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FA3558' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Styling the New Quantity Inputs */
.flo-mini-qty-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
}

.woocommerce-mini-cart-item .flo-right-qty {
    position: absolute !important;
    right: 65px !important; /* Places it directly left of the trash can */
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 8px !important;
}

.flo-mini-qty-changer {
    display: flex !important;
    align-items: center !important;
    background-color: #FA3558 !important;
    border-radius: 30px !important;
    padding: 2px 8px !important;
    box-shadow: 0 4px 10px rgba(250, 53, 88, 0.2) !important;
}

.flo-mini-qty-changer .qty-btn {
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    width: 20px !important;
    text-align: center !important;
    user-select: none !important;
}

.flo-mini-qty-changer input[type="number"] {
    background: transparent !important;
    border: none !important;
    color: #FFFFFF !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    -moz-appearance: textfield !important;
}

.flo-mini-qty-changer input[type="number"]::-webkit-outer-spin-button,
.flo-mini-qty-changer input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

.flo-mini-price {
    font-family: 'Manrope', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #FA3558 !important;
}

.woocommerce-mini-cart__total {
    border-top: 2px solid #EAEAEA !important;
    padding: 25px 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.woocommerce-mini-cart__total strong {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #666 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.woocommerce-mini-cart__total .amount {
    font-family: 'Manrope', sans-serif !important;
    font-size: 22px !important;
    color: #1C1C1C !important;
    font-weight: 700 !important;
}

.woocommerce-mini-cart__buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 0 30px 0 !important;
    margin: 0 !important;
}

.woocommerce-mini-cart__buttons a {
    display: block !important;
    text-align: center !important;
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 18px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
}

.woocommerce-mini-cart__buttons a.button:not(.checkout) {
    background-color: #EAEAEA !important;
    color: #1C1C1C !important;
}

.woocommerce-mini-cart__buttons a.checkout {
    background-color: #FA3558 !important;
    color: #FFFFFF !important;
    box-shadow: 0 5px 15px rgba(250, 53, 88, 0.2) !important;
}

.woocommerce-mini-cart__buttons a:hover {
    opacity: 0.9 !important;
    transform: translateY(-2px) !important;
}

.woocommerce-mini-cart__empty-message {
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px !important;
    color: #666 !important;
    text-align: center !important;
    margin-top: 40px !important;
}

/* =======================================
   MINI-CART SCROLL TRAP 
======================================= */

.flo-mini-cart-inner,
.flo-mini-cart-content {
    /* This traps the scroll wheel inside the box so the background page cannot move */
    overscroll-behavior: contain !important; 
}

.flo-mini-cart-content {
    /* Forces the scrollable area to stretch to the absolute edges of the box */
    width: 100% !important;
    box-sizing: border-box !important;
}

body.flo-cart-open {
    /* A backup lock to freeze the main page when the cart is open */
    overflow: hidden !important; 
    touch-action: none !important;
}

/* =======================================
   ULTIMATE Z-INDEX OVERRIDE FOR CART POPUPS
======================================= */
.flo-mini-cart-overlay,
.flo-cart-toast,
#flo-cart-toast {
    z-index: 2147483647 !important; /* The maximum possible z-index value in CSS */
}

/* =======================================
   CONVERT MINI-CART TO TITLE CASE 
======================================= */
.mini-cart-title,
.woocommerce-mini-cart__total strong,
.woocommerce-mini-cart__buttons a {
    text-transform: capitalize !important; 
}

/* =======================================
   CART PAGE TITLE ALIGNMENT
======================================= */
body.woocommerce-cart h1.entry-title, 
body.woocommerce-cart h1.page-title {
    padding-left: 210px !important; /* Matches the 40px container padding */
}

@media (max-width: 900px) {
    body.woocommerce-cart h1.entry-title, 
    body.woocommerce-cart h1.page-title {
        padding-left: 20px !important; /* Matches the 20px mobile container padding */
    }
}

/* ==============================
   REAL STORIES VIDEO FIX
============================== */
.flo-story-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This forces the video to crop and fit the 260x460 box perfectly */
  border-radius: 20px; /* Matches your placeholder radius */
  z-index: 1;
}

/* Ensure the play button sits above the video */
.video-placeholder .play-icon-overlay {
  position: relative;
  z-index: 5;
}

/* Hide native video controls until the video is actually playing */
.flo-story-video::-webkit-media-controls {
  display: none !important;
}
.flo-story-video.is-playing::-webkit-media-controls {
  display: flex !important;
}

/* =======================================
   BLOG PAGE NAVIGATION MENU
======================================= */
.flo-blog-nav-menu {
    max-width: 900px;
    margin: 0 auto 80px auto; /* 80px bottom margin for spacing before next section */
    background-color: #1C1C1C; /* Dark background matching the brand's text dark color */
    border-radius: 60px;
    padding: 6px; /* Padding creates the gap between the outer pill and inner active pill */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.flo-blog-nav-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.flo-blog-nav-item {
    flex: 1; 
    text-align: center;
    margin: 0 !important;
}

.flo-blog-nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 56px; 
    padding: 10px 20px;
    font-family: 'Manrope', sans-serif !important;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF; /* Inactive text color */
    text-decoration: none !important;
    border-radius: 50px; 
    line-height: 1.2;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Active State and Hover State */
.flo-blog-nav-item.active a,
.flo-blog-nav-item a:hover {
    background-color: #FFFFFF;
    color: #1C1C1C; /* Dark text on white pill */
}

/* --- Mobile Responsiveness (Horizontal Scroll) --- */
@media (max-width: 768px) {
    .flo-blog-nav-menu {
        border-radius: 30px;
        margin: 0 15px 60px 15px; /* Add margin on sides so it doesn't touch screen edges */
    }

    .flo-blog-nav-list {
        flex-wrap: nowrap;
        overflow-x: auto; /* Allows scrolling on small screens */
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Hide scrollbar Firefox */
    }
    
    .flo-blog-nav-list::-webkit-scrollbar {
        display: none; /* Hide scrollbar Chrome/Safari */
    }

    .flo-blog-nav-item {
        flex: 0 0 auto; /* Prevent items from shrinking */
        min-width: 120px; /* Give each item enough room */
    }
}

/* --- Sliding Capsule Animation Styles --- */
.flo-blog-nav-list {
    position: relative; /* Required to constrain the absolute capsule */
    z-index: 1; 
}

.flo-nav-capsule {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #FFFFFF;
    border-radius: 50px;
    z-index: -1; /* Pushes the white pill behind the text */
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* Creates a smooth, spring-like slide */
    width: 0; /* JS will set the actual width */
}

/* Force links to be transparent so the capsule shows through */
.flo-blog-nav-item a {
    background-color: transparent !important; 
    position: relative;
    z-index: 2;
    color: #FFFFFF; /* Inactive text color */
}

/* Change text to dark when the capsule slides under it */
.flo-blog-nav-item.active a {
    color: #1C1C1C !important; 
}

/* Optional: Slight color shift on hover before click */
.flo-blog-nav-item a:hover {
    color: #f8bf24 !important; /* Yellow hover hint */
    background-color: transparent !important;
}

/* --- Academic Reference Links --- */
.flo-ref-link {
    color: #1583a6; /* Matches the blue author text */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.flo-ref-link:hover {
    color: #FA3558; /* Shifts to brand pink on hover */
    text-decoration: underline;
}

/* --- Academic Article Subsection Titles --- */
.flo-subsection-title {
    font-family: 'Fredoka', sans-serif !important;
    font-size: 24px !important;
    font-weight: 200 !important; /* Fredoka One defaults to 400 */
    color: #1C1C1C !important;
    margin-top: 30px !important;
    margin-bottom: 20px !important;
    text-transform: capitalize !important;
    letter-spacing: 0.5px !important;
}

/* --- Article Figures & Images --- */
.flo-article-figure {
    width: 100% !important; 
    max-width: 850px !important; /* Change this number to test */
    margin: 40px auto !important; /* Centers it */
    background-color: #FDFBF5 !important; 
    border: 1px solid #EAEAEA !important;
    border-radius: 12px !important;
    padding: 20px !important;
    text-align: left !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

.flo-figure-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
    display: block;
}

.flo-figure-caption {
    padding: 0 10px;
}

/* Fredoka 300 Weight for the Title */
.flo-figure-title {
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 300 !important;
    font-size: 18px !important;
    color: #1C1C1C !important;
    margin: 0 0 8px 0 !important;
    text-transform: none !important;
}

/* Manrope for the descriptive text */
.flo-figure-text {
    font-family: 'Manrope', sans-serif !important;
    font-size: 14px !important;
    color: #555555 !important;
    line-height: 1.6 !important;
    margin: 0 0 4px 0 !important;
}

/* --- Scrollable Data Table Styles --- */
.flo-table-scroll-container {
    width: 100%;
    max-height: 550px; /* Forces vertical scrolling like the screenshot */
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #EAEAEA;
    border-radius: 8px;
    margin-bottom: 25px; /* Spacing between table and caption */
    background-color: #FFFFFF;
}

/* Custom Scrollbar for the Table */
.flo-table-scroll-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.flo-table-scroll-container::-webkit-scrollbar-track {
    background: #F1F1F1;
    border-radius: 8px;
}
.flo-table-scroll-container::-webkit-scrollbar-thumb {
    background: #C1C1C1;
    border-radius: 8px;
}
.flo-table-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #A8A8A8;
}

.flo-custom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 800px; /* Ensures columns don't squish too much on mobile */
}

/* Table Headers (Sticky and Bold) */
.flo-custom-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #F6F6F6; /* Matches the grey header background */
    font-family: 'Manrope', sans-serif !important;
    font-weight: 700 !important; /* Bold per instructions */
    font-size: 14px !important;
    color: #1C1C1C !important;
    padding: 16px 20px;
    border: 1px solid #EAEAEA;
    border-top: none;
}

/* Table Cells (Normal Weight) */
.flo-custom-table td {
    font-family: 'Manrope', sans-serif !important;
    font-weight: 400 !important; /* Normal weight per instructions */
    font-size: 14px !important;
    color: #333333 !important;
    padding: 16px 20px;
    border: 1px solid #EAEAEA;
    vertical-align: top;
    line-height: 1.5;
}

/* Optional: Removes outside borders on the cells to match the container's border */
.flo-custom-table th:first-child, .flo-custom-table td:first-child {
    border-left: none;
}
.flo-custom-table th:last-child, .flo-custom-table td:last-child {
    border-right: none;
}

/* =========================================
   AUTHORS SECTION STYLING
========================================= */

/* The outer light grey container */
.flo-authors-container {
    background-color: #ebebeb; 
    border-radius: 24px;
    padding: 40px;
    margin-top: 40px;
    font-family: 'Manrope', sans-serif;
}

/* Adjust heading to match the previous section styles */
.flo-authors-container .flo-content-title {
    margin-top: 0;
    margin-bottom: 24px;
}

/* Individual white author cards */
.flo-author-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); /* Very subtle shadow for depth */
}

/* Remove bottom margin on the last card */
.flo-author-card:last-child {
    margin-bottom: 0;
}

/* Circular Avatars */
.flo-author-avatar-wrap {
    flex-shrink: 0;
}
.flo-author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    background-color: #f0f0f0;
}

/* Author Text Details */
.flo-author-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.flo-author-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.flo-author-name {
    font-weight: 700;
    color: #212529;
    text-decoration: none;
    font-size: 1.15rem;
}
.flo-author-name:hover {
    color: #4a4a4a;
}

.flo-author-badge {
    font-size: 0.8rem;
    color: #7b8a96;
    font-weight: 500;
}

.flo-author-aff {
    margin: 0;
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Send Email Action Button */
.flo-author-action {
    flex-shrink: 0;
    margin-left: 15px;
}
.flo-author-email {
    color: #1b8a9e; /* Teal/Blue color to match typical mail links */
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}
.flo-author-email:hover {
    color: #125e6c;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 768px) {
    .flo-authors-container {
        padding: 24px;
    }
    .flo-author-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .flo-author-action {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* =========================================
   MEDIA TAB & MODAL STYLES
========================================= */

/* Media Cards */
.flo-media-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.flo-media-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    border: 1px solid #f0f0f0;
}

.flo-media-actions {
    margin-top: auto; /* Pushes the button to the bottom */
    display: flex;
    justify-content: flex-start; /* Aligns to bottom left */
}

/* Download & View Larger Buttons */
.flo-media-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background-color: #f7f7f8;
    color: #212529;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 8px;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Manrope', sans-serif;
}
.flo-media-btn:hover {
    background-color: #ebebeb;
}

/* Table Preview (Faded Bottom) */
.flo-table-preview-wrapper {
    position: relative;
    max-height: 250px;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid #e2e2e2;
}
.flo-table-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
    z-index: 10;
}

/* Fullscreen Table Modal */
.flo-table-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Opaque black background */
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.flo-table-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}
.flo-table-modal-content {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 32px;
    width: 95%;
    max-width: 1400px; /* Large width */
    max-height: 90vh; /* Large height */
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Controls the 9-10 rows scrolling */
.flo-table-modal-scroll {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 10px;
    max-height: 65vh; /* Fits roughly 9-10 records perfectly before needing to scroll */
}

/* Custom Scrollbar for the modal */
.flo-table-modal-scroll::-webkit-scrollbar {
    width: 8px;
}
.flo-table-modal-scroll::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
.flo-table-modal-scroll::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 4px;
}
.flo-table-modal-scroll::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; 
}