/** Shopify CDN: Minification failed

Line 28:0 Unexpected "{"
Line 28:1 Unexpected "{"
Line 28:3 Expected identifier but found "'Playfair Display'"
Line 588:0 Unexpected "}"

**/
/* ==========================================================================
   Module Stylesheet
   File: bf-module-glossary.css

   Purpose:
   Styles specific to the Glossary module.
   Loaded via utility.stylesheet (async) in Expanse theme.

   Notes:
   - No global resets or base element styles.
   - Avoid overrides unless scoped to this module.
   - Keep selectors tight and predictable.

   Last updated: 2026-01-15
   ========================================================================= */


/* == TIPPY INLINE GLOSSARY ================================================ */

{{ 'Playfair Display' | font_face }}   /* Shopify-hosted Google font */

/* ==== INLINE TERM ===== */
.bf-term {
  cursor: help;
  border-bottom: 1px dotted;
  transition: color .2s;
}
.bf-term:hover,
.bf-term:focus {
  color: #2c7a7b;
  border-bottom-style: solid;
  outline: none;
}
.bf-term::after {                /* info icon */
  /* content: 'ⓘ'; */
  content: '⌝';
  font-size: .8em;
  vertical-align: super;
}

/* ==== TIPPY THEME TWEAKS ==== */
.tippy-box[data-theme~='light-border']{
  background: white;
  color: #333;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-radius: 8px;
  padding-top: 4px;
  padding-bottom: 8px;
}
.tippy-box[data-theme~='light-border']>.tippy-arrow::before{
  color: #fff;                    /* arrow matches panel */
}
.tippy-box[data-theme~='light-border'] a{
  color: #2c7a7b;
  text-decoration: underline;
}
.tippy-box[data-theme~='light-border'] a:hover{
  color: #175d60;
}

/* ==== TOOLTIP INNER LAYOUT ==== */
.bf-tip{
  max-width: 220px;
  display: block;                 /* enables float layout */
  font-size: 0;                   /* kill stray gaps */
}
.bf-tip::after{                  /* clearfix */
  content: "";
  display: block;
  clear: both;
}

.bf-tip hr {
  margin: .5rem 0 .5rem 0;
  border: 1px solid #eaeded;
  display: none;
}

/* thumbnail */
.bf-tip-thumb{
  float:left;
  width:60px; height:60px;
  object-fit:cover;
  border-radius:4px;
  margin:0 8px 4px 0;
}

/* title */
.bf-tip-title{
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 2px;
  letter-spacing: .03em;
}

/* latin */
.bf-tip-latin {
  margin: 0 0 4px;
  font-size: .5em !important;
  color: gray;
  font-style: italic;
}
  .bf-tip-latin em {
    font-family: Georgia, serif !important;
    font-size: .8rem !important;
  }

/* description */
.bf-tip-desc {
  font-size:.7rem;
  line-height:1.35;
  margin:0 0 1rem 0;
}

/* “more info” link */
.bf-tip-link {
  float:right;
  font-size:.7rem;
  color:#2c7a7b;
  text-decoration:none;
}
  .bf-tip-link:hover{
    color:#175d60;
    text-decoration:underline;
  }

/* inline colour dot */
.bf-chip{
  display:inline-block;
  width:.65rem; height:.65rem;
  border-radius:50%;
  margin:0 .35rem 0 .25rem;
  vertical-align:middle;
}

/* shared line style for perks + aroma */
.bf-tip-extra{
  display:flex;
  gap:4px;                  /* tiny space after label */
  font-size:.7rem;
  line-height:1.3;
  margin:0 0 4px;
  border-top: 1px dotted #D3D3D3;
  padding-top: .25rem;
}

  .bf-tip-extra span:last-child{
    flex:1 1 auto;            /* wraps naturally */
  }

  .bf-tip-extra strong {
    text-transform: uppercase;
    font-size: smaller;
    color: gray;
  }

.bf-tip-extra .label{
  flex:0 0 60px;            /* fixed column */
  text-transform: uppercase;
  font-size: smaller;
  color: gray;
}





/* == INGREDIENT GLOSSARY GRID ================================================ */

/* Loader class - dynamic application */
.hidden {
  display: none;
}

#ingredients-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 1.2rem;
}


/* Outer wrapper gives breathing room */
.bf-ingredients-wrap{
  padding:2rem 3vw;          /* adjust space as you like */
}

/* Responsive grid */
.bf-grid{
  display:grid;
  gap:1rem;                                   /* space between cards  */
  grid-template-columns:repeat(auto-fill,
                       minmax(240px,1fr));     /* card width ~-30 %    */
}

/* Card container */
.bf-card{
  border:1px solid #e5e5e5;
  border-radius:8px;
  padding:.7rem;
  background:#fff;
}

  .bf-card hr {
      margin:  1rem 0;
      border: 1px solid whitesmoke;
  }

/* For show and hide animation */
.bf-card {
  transition: opacity .3s ease, transform .3s ease;
  /* make sure hidden cards don’t take up space: */
  will-change: opacity, transform;
}
.bf-card.hidden {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}


/* Thumbnail */
.bf-card-img {
  width:100%;
  height:110px;
  object-fit:cover;
  border-radius:4px;
  margin-top: .5rem;
}

/* Title, Latin, perks */
.bf-card-title {
  margin:6px 0 0 0;
  /* font:700 .75rem/1.15 var(--font-sans,Arial,Helvetica,sans-serif); */
  font-size: .8rem;
  text-transform:uppercase;
}
.bf-card-latin {
  margin:0 0 1.5rem 0;
  font-size:.6rem;
  color: darkgray;
  text-transform: lowercase;
}
.bf-card-perks {
  margin:0 0 6px;
  font-size:.6rem;
  line-height:1.25;
}

/* Aroma row */
.bf-card-aroma {
  margin:0;
  font-size:.6rem;
  display:flex;
  align-items:center;        /* dot + text on same baseline */
  gap:6px;                   /* fallback gap */
}
.bf-card-aroma .bf-card-aroma-dot {         /* aroma color circle */
  flex:0 0 10px;
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  margin-right:4px;          /* extra space before text */
}





/* Generic dot (used elsewhere, optional) */
.dot {
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  flex-shrink:0;
}

/* Related-products list – inline capsule buttons */
.bf-card-products {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  /* first value = row-gap, second = column-gap */
  gap: 2px 4px;   /* keeps 6px between each button, only 0px between rows */
}

  .bf-card-products li {
    margin: 0;
  }
  
  .bf-card-products a {
    display: inline-block;
    background: #f1f5f9;       /* subtle neutral bg */
    color: #2c7a7b;            /* brand accent */
    padding: 1px 8px;          /* vertical + horizontal padding */
    border-radius: 9999px;     /* pill shape */
    font-size: .7rem;
    text-decoration: none;
    transition: background .2s, color .2s;
  }
  
  .bf-card-products a:hover {
    background: #fff79d;       /* slight highlight */
    color: #393939;
  }




/* fallback pill when “used in many” is toggled */
.bf-card-fallback {
  margin: 6px 0 0;
}
.bf-card-many {
  display: inline-block;
  background: #f0f0f0;    /* light gray bg */
  color: #000;            /* black text */
  padding: 5px 11px;
  border-radius: 9999px;  /* pill shape */
  font-size: .6rem;
  line-height: 1;
}



/* Optional: differentiate label from value */
.bf-card-perks::before,
.bf-card-function::before,
.bf-card-aromatherapy::before {
  font-weight: 700;
}

/* If you want the colon labels bold: */
.bf-card-perks {
  /* Skin Perks: is already in HTML */
}
.bf-card-function {
  /* Function: is already in HTML */
}

/* Flex-wrap labels and values */
.bf-card-perks,
.bf-card-function, 
.bf-card-aromatherapy{
  display: flex;
  gap: 4px;
  margin: 0 0 6px;
  font-size: .6rem;
  line-height: 1.25;
}

.bf-card-perks .label,
.bf-card-function .label, 
.bf-card-aromatherapy .label {
  flex: 0 0 60px;             /* label column width */
  text-transform: uppercase;
  font-size: .6rem;
  color: #2c7a7b !important;
}

.bf-card-perks span:last-child,
.bf-card-function span:last-child
.bf-card-aromatherapy span:last-child{
  flex: 1 1 auto;             /* allow value to wrap within remaining space */
}




/* == No-results fallback == */
.no-results {
  display: none;               /* JS toggles this */
  text-align: center;
  padding: 1.5rem;
  font-size: .9rem;
  color: #666;
  font-style: italic;
}

/* == Filter-bar container == */
.bf-filter-bar {
  display: flex;
  justify-content: space-between;  /* push search → left, controls → right */
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  /* margin-bottom: 1rem; */
  flex-wrap: nowrap;               /* prevent wrapping */
}

/* == Left side: search + clear == */
.bf-filter-search {
  display: flex;
  flex: 0 0 auto;                  /* don’t grow or shrink */
  gap: .5rem;
  align-items: center;
}

/* == Right side: dropdown groups == */
.bf-filter-controls {
  display: flex;
  flex: 0 0 auto;                  /* don’t grow or shrink */
  gap: .75rem;
}

/* Active/filter-open state */
.bf-filter-group.open > strong {
  background: #e6f7ff;      /* subtle light-blue bg */
  border-color: #66c2ff;    /* slightly stronger border */
  color: #007acc;           /* optional text color shift */
}

/* Smooth transition */
.bf-filter-group > strong {
  transition: background .2s, border-color .2s, color .2s;
}


/* == Clear all button == */
#clear-filters {
  background: #e2e8f0;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  padding: .5rem .75rem;
  font-size: .85rem;
  cursor: pointer;
  transition: background .2s;
}
#clear-filters:hover {
  background: #cbd5e0;
}

/* == Filter groups == */
.bf-filter-group {
  position: relative;
  flex: 1 1 auto;
}

/* Group header as button */
.bf-filter-group > strong {
  display: inline-block;
  cursor: pointer;
  padding: .6rem .9rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: .9rem;
  line-height: 1;
  transition: background .2s, border-color .2s;
}
.bf-filter-group > strong:hover {
  background: #f5f5f5;
  border-color: #bbb;
}

/* Dropdown panel */
.bf-filter-group .dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1000;
  display: none;
  width: clamp(260px, 30vw, 360px);
  max-height: 300px;
  padding: .75rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow-y: auto;
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0;
  transform: translateY(-6px);
}

/* Show when open */
.bf-filter-group.open .dropdown {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Option labels inside dropdown */
.bf-filter-group .dropdown label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: .85rem;
  white-space: nowrap;
}
.bf-filter-group .dropdown label:last-child {
  margin-bottom: 0;
}
.bf-filter-group .dropdown input {
  margin: 0;
}

/* Force all filter buttons to hug their content */
.bf-filter-group {
  flex: 0 0 auto !important;    /* don’t grow or shrink */
  margin: 0 !important;         /* clear any stray margins */
}

/* Remove any push on the controls wrapper */
.bf-filter-controls {
  margin-left: 0 !important;    /* sit flush against the search area */
  flex-wrap: nowrap;            /* keep all buttons on one line */
}

/* Make the search/input+clear take up less real estate */
.bf-filter-search {
  flex: 0 0 auto;       /* no growing */
}
.bf-filter-search input {
  flex: 0 0 250px;      /* pick a width that leaves room */
  max-width: 40vw;      /* or up to 40% of viewport */
}

/* Keep the Function dropdown from bleeding off the right edge */
.bf-filter-group:last-child .dropdown {
  left: auto;           /* cancel the default left:0 */
  right: 0;             /* pin it to the right of its container */
}

/* (Optionally) do the same for the 2nd filter if needed */
.bf-filter-group:nth-last-child(2) .dropdown {
  left: auto;
  right: 0;
}

/* give the whole bar a little right-padding so panels never hit the viewport edge */
.bf-filter-bar {
  padding-right: 2rem;
}

/* flip the first panel (Aroma) so its right edge hugs the button */
.bf-filter-group:first-child .dropdown {
  left: auto;
  right: 0;
}




/* == Search box == */
#ingredient-search {
  flex: 1 1 200px;
  padding: .5rem .75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: .9rem;
}


/* == Empty grid state == */
.bf-grid.empty > article { display: none; }
.bf-grid.empty + .no-results { display: block; }

  /* No-results message tweak */
  .no-results {
    padding: 2rem 1rem;
    font-size: 1rem;
  }
}


/* Allow the search+clear wrapper to expand */
.bf-filter-search {
  flex: 1 1 auto !important;
}

/* Make the search input fill its wrapper */
.bf-filter-search #ingredient-search {
  flex: none !important;
  width: 100% !important;
}

/* Keep “Clear All” at its natural size */
.bf-filter-search #clear-filters {
  flex: 0 0 auto !important;
  margin: 0 !important;
}


@media (max-width: 767px) {
  /* Stack the entire bar vertically */
  .bf-filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .75rem !important;
  }

  /* Keep search & clear at top, side-by-side (full-width each) */
  .bf-filter-search {
    display: flex !important;
    gap: .5rem !important;
  }
  .bf-filter-search #ingredient-search,
  .bf-filter-search #clear-filters {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  /* Switch filter groups to block so they stack */
  .bf-filter-controls {
    display: block !important;
  }
  .bf-filter-group {
    width: 100% !important;
    margin: 0 0 .5rem !important;
  }

  /* Make each “button” label 100% wide */
  .bf-filter-group > strong {
    display: block !important;
    width: 100% !important;
  }

  /* When opened, dropdown sits directly below and pushes everything */
  .bf-filter-group .dropdown {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border-color: #ddd !important;
    max-height: 200px !important;
    margin-top: .25rem !important;
  }
}


/* ==== Monospace “scientific” vibes ==== */

.bf-card-title,
.bf-tip-title {
  font-family: 'Courier Prime', monospace !important;
}

/* brand headings, with a touch of monospace fallback */
.bf-card-title,
.bf-tip-title {
  font-family: var(--font-slab, Georgia, serif), 
               'JetBrains Mono', Menlo, Consolas, monospace;
  letter-spacing: .05em;    /* a little extra breathing for emphasis */
}

/* All the detail text—perks, function, aroma, latin—go monospace */
.bf-card-perks,
.bf-card-function,
.bf-card-aroma,
.bf-card-aromatherapy,
.bf-card-latin,
.bf-tip-extra span:last-child,
.bf-tip-latin {
  font-family: 'JetBrains Mono', Menlo, monospace !important;
  font-size: .65rem !important;
  letter-spacing: .02em;
}

/* Labels (“Skin Perks:”, “Function:”, etc.) stay in system sans for clarity */
.bf-card-perks .label,
.bf-card-function .label,
.bf-card-aromatherapy .label,
.bf-tip-extra strong {
  font-family: var(--font-sans, Arial, sans-serif) !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: lightgray;
}

/* “More Info” and tooltip links in monospace */
.bf-card-more-link,
.bf-tip-link {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: .7rem;
}

/* Tweak dot labels to match */
.bf-card-aroma .bf-card-aroma-dot,
.bf-tip-extra .bf-chip {
  /* no change here since I like the existing size and color */
}


/* tint the grid background and pad around it */
.bf-ingredients-wrap {
  background-color: #FCF8F2;  /* warm, neutral beige */
  padding: 2rem 3vw;          /* keep your existing padding */
}

/* ensure cards pop off the background */
.bf-card {
  background-color: #FFF !important;
}

.bf-card-latin {
  font-family: serif !important;
  font-style: italic;
  font-size: .8rem !important;
}












/* == INGREDIENT SPOTLIGHT BLOCK ================================================ */

/* Section padding */
.section--ingredients.glossary-wrapper {
  padding: 2rem 0;
}

/* 1) Flex grid: up to 3 cards, centered, equal gutters */
.glossary-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

/* ————————————————————————————————————————————————
   Cap at 4 per row, then down to 3 / 2 / 1
————————————————————————————————————————————————*/

.glossary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* tablet: 2 columns */
@media (max-width: 1024px) {
  .glossary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* mobile: 1 column */
@media (max-width: 740px) {
  .glossary-grid {
    grid-template-columns: 1fr;
  }
}


/* 2) Card shell: two-column flex, contained, uniform height */
.glossary-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 220px;         /* adjust to taste */
  /* padding: 1rem; */
  background: #fff;
  /* border: 1px solid #e5e5e5; */
  border: 1px solid #D3D3D3;
  border-radius: 6px;
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.08); */
  box-sizing: border-box;
  /* prevent inner content from forcing overflow */
  min-width: 0;
}

/* 3) Thumbnail column (left 33%) */
.glossary-card .card__media {
  flex: 0 0 33%;
  display: flex;
  align-self: stretch;       /* full card height */
  align-items: center;       /* center thumb vertically */
  justify-content: center;   /* and horizontally */
  background-color: #FCF8F2;
  border-radius: 6px 0 0 6px;
  padding: 1rem;
  box-sizing: border-box;
}

/* Circle crop the image */
.glossary-card .card__media img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  opacity: 0; /* hiding the inline image and loading it into parent BG */
}

/* 4) Content column (right 67%) */
.glossary-card .card__content {
  flex: 1 1 67%;
  text-align: left;
  padding: 20px 10px 20px 5px;
  min-width: 0;   /* necessary in flex layouts */

}

/* 5) Wrappable headings */
.glossary-card .card__heading {
  overflow-wrap: break-word;
}

.card__content {
  line-height: 1em;
}

.glossary-card h4 {
  font-size: 1rem;
  font-family: 'JetBrains Mono', Menlo, monospace;
  margin-bottom: 0;
}

p.latin-name {
  font-family: serif;
  font-style: italic;
  font-size: .8rem;
  line-height: 1.5em;
  color: #b2babb;
  padding-top: 0;
  padding-bottom: 1em;
}

.glossary-card p {
  margin-bottom: 0.5rem;
}

.glossary-card .detail-label {
  text-transform: uppercase;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: .75rem;
  font-weight: bold;
  color: #b2babb;
  
  display: block; /* pushes 'detail-value' down to next line */
}

.glossary-card .detail-value {
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: .75rem;
  letter-spacing: .02em;
}