/** Shopify CDN: Minification failed

Line 1114:0 Unexpected "}"

**/
.footer__title {
  font-weight: bold;
  font-size: var(--body-font-size) !important;
}

.type-banner .promo-grid__container {
  align-items: center;
  height: 100%;
}

.type-banner__text {
  flex-direction: column;
  gap: 1rem;
}

.flex-grid__item--75 .type-banner__text,
.flex-grid__item--100 .type-banner__text {
  flex-direction: row;
}

.type-banner__text h2,
.type-banner__text p {
  margin: 0;
}

.type-banner__text .element-button {
  margin: 0;
}

.collection-hero__content.overlay {
  --element-text-color: rgb(255,255,255);
  --color-secondary: rgb(0,0,0, 0.6);
}

.element-input:not(.element-input--transparent) {
  --element-input-color-primary: var(--root-color-primary, #000);
  --element-input-color-secondary: var(--root-color-secondary, #fff);
}

.newsletter__input-group .element-input~button {
  --element-button-height: initial;
}

.newsletter-section .element-text.element-text--heading-h0 {
  font-size: var(--element-text-font-size--heading-2xl);
  line-height: var(--element-text-line-height--heading-2xl);
}

.newsletter-section .element-text.element-text--heading-h1 {
  font-size: var(--element-text-font-size--heading-xl);
  line-height: var(--element-text-line-height--heading-xl);
}

.newsletter-section .element-text.element-text--heading-h2 {
  font-size: var(--element-text-font-size--heading-lg);
  line-height: var(--element-text-line-height--heading-lg);
}

.newsletter-section .element-text.element-text--heading-h3 {
  font-size: var(--element-text-font-size--heading-md);
  line-height: var(--element-text-line-height--heading-md);
}

.text-with-icons__block-text a,
.newsletter-section__content a {
  text-decoration: underline;
}

/* Custom CSS for Biggs and Featherbelle */
/* ↑ THE MARKER. Everything ABOVE this line is stock Archetype Expanse and may be
   replaced from upstream on a theme upgrade. Everything BELOW is Casey's and must be
   preserved in full. Never resolve this file by taking the upstream version wholesale.
   See docs/plan/PATTERNS.md. */
/* = = = = = = = = = = = = = = = = = =  */

/* ---------------------------------
   1. BASE STYLES
   --------------------------------- */

.site-nav__link--underline:after {
    content: "";
    display: none;
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    margin: 0 var(--site-nav-item-padding);
    border-bottom: 6px solid;
    border-bottom-color: var(--color-primary);
}
  
/* ---------------------------------
   2. LAYOUT
   --------------------------------- */

/* TOP Nav: Fix 1st in MAIN NAV image */
.slide-nav__image + span {padding-left: 0px}
.slide-nav__image img {display: none}

/* TOP Nav: text all CAPS */
#SiteHeader .header-item--navigation {text-transform: uppercase;}

/* Collection Pages - Hides the page description displaying __within__ hero image */
#CollectionHeaderSection .section-header .collection-hero__description {display: none}

/* FOOTER */

/* Footer: Fix global gap that appears at the bottom of every page. */
.page-container {
  width: 100%;
  position: absolute;
}

/* Footer: Activated Schema */
#FooterMenus ul.footer__menu li a {
  color: white ;
  transition: 0.3s;
}
  #FooterMenus ul.footer__menu li a:hover {
    color: #00b6a0;
  }

/* Footer: Hide Shopify Ad */
.footer__section .footer__base-links a[rel="nofollow"] {
  display: none !important;
}

/* ---------------------------------
   3. COMPONENTS
   --------------------------------- */

/* Collection Page: Set tag below primary nav bar */
.product-grid-item .grid-product__tags {
  z-index: 1 !important;
}

/* Collection Page: Tag Overclass */
.element-badge--inverted {
  background-color: #FEDC5D;
  color: #393939;
  font-size:.65rem;
}

/* Product cards: a colour for each label word, and for Sold Out and Save (BF labels).
   A label carries its word as a class — "seasonal" is .bf-label--seasonal, "new" .bf-label--new —
   from snippets/list.product-card.liquid; a word with no rule of its own takes the default below. Product cards
   only: the yellow above still colours the product page's "Save" badge and the promo grid's.
   Every pair is at least 4.5:1, for the badge's small text. The tags are capsules (the badge's own radius hook). */
.grid-product__tags {
  --element-badge-radius: 999px;
}

.grid-product__tags .element-badge--custom {
  background-color: #313652; /* any other word: navy, 11.80:1 */
  color: #ffffff;
}

.grid-product__tags .element-badge--custom.bf-label--seasonal {
  background-color: #3a63a8; /* denim, 5.95:1 */
  color: #ffffff;
}

.grid-product__tags .element-badge--custom.bf-label--new {
  background-color: #007471; /* brand teal, 5.62:1 */
  color: #ffffff;
}

.grid-product__tags .element-badge--custom.bf-label--bargain {
  background-color: #2f6b3b; /* forest green, 6.39:1 */
  color: #ffffff;
}

.grid-product__tags .element-badge--custom.bf-label--bundle {
  background-color: #845284; /* plum, 5.96:1 */
  color: #ffffff;
}

.grid-product__tags .element-badge--sold-out {
  background-color: #595959; /* grey, 7.00:1 */
  color: #ffffff;
}

/* Save is pinned here like the rest, not taken from Theme settings → Colors → Sale tag: axe sets every card badge
   aside ("needs review"), so a colour chosen in the theme editor would reach the cards unchecked. Every badge colour
   lives in this file and changes only through a session that measures it (Casey, session 20). */
.grid-product__tags .element-badge--sale {
  background-color: #ba4444; /* red, 5.25:1 */
  color: #ffffff;
}

.add-to-cart[disabled] {
  background-color: #fabfbf;
  color: #393839;
}


/* ---------------------------------
   4. SPECIFIC APP ADJUSTMENTS
   --------------------------------- */

/* Biscuits Bundler - Hiding the Step Number since the app won't do it, despite ticking the box */
div.biscuits-bundle-body h3.biscuits-bundle-step__number {
  display:none !important;
}

/* Biscuits Bundler - Bundle Header */
div.biscuits-bundle-body h3.biscuits-bundle-step__title {
font-size: 1.4em;
width: 66%;
}

/* Back In Stock: Product Page Button */
#BIS_trigger {
  padding: 8px;
  transition: background-color .5s;
}
  #BIS_trigger:hover {
    background-color: #c8e2ee;
  }

/* CrossUpSell: Relocate 'Add To Cart' button */
div.xsell-quick-add-to-cart {
  top: 20px;
  right: 10px;
  color: white;
}

/* ---------------------------------
   5. SECTIONS & PAGES
   --------------------------------- */

/* Product - Meta Title */
div.product-grid__content.product--description > layout-stack > div:nth-child(1) {
  text-transform: uppercase;
  font-family: "Archivo Black";
  font-size: 2.4em;
  letter-spacing: 0;
  line-height: .9em;
  margin: 1em 0 0 0;
  padding: 0;
}
/* A11Y-019: the visible title is the page's h1 — a custom block in the bf- product templates renders the
   bf_product_tile metafield as <h1 class="bf-product-title"> inside that first div. It keeps the div's look
   (font, size, case, colour) instead of the theme's heading styles, so nothing changes on screen. */
div.product-grid__content.product--description > layout-stack > div:nth-child(1) > h1.bf-product-title {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
/* Product - Meta Subtitle */
/* A11Y-022: was #b1b3b6 (2.1:1 on white). The secondary grey, #666666 (5.74:1) — A11Y-004/005's colour. */
div.product-grid__content.product--description > layout-stack > div:nth-child(2) {
  font-size: 1.4em;
  margin: 0 0 1em 0;
  padding: 0 0 1em 0;
  color: #666666;
  border-bottom: 4px solid #F8F8F8;
}

div.product-grid__content.product--description div.product__quantity {
  margin-top: 2em;
}

/* BF (A11Y-025): the collection Sort control was invisible — white "Featured" and a white chevron on the white
   page (1:1). Expanse v10 draws it as an inverted, transparent button, whose text is the button scheme's
   *primary*; B&F's button scheme is primary #ffffff on secondary #007471 (that is what makes Add to cart white on
   teal), so with no background the text vanished. Like the quantity selector (element.quantity-selector.liquid),
   a transparent select button takes the colours of the section it sits in instead. The selector outranks the
   global button rule in head.styles.settings-color.liquid (0,3,0 against 0,2,0).
   The wrapper's class, not the element's name: until a lazy section hydrates, is-land renames <element-select>
   to <is-land--element-select> (the mechanism behind A11Y-018), and a rule written against the final name left
   the control white on white for the moment before it loaded — seen on live after release #19, on the two
   collection pages where it sits low on the page. */
.element-select__wrapper .element-button.element-button--transparent {
  --element-button-color-primary: var(--color-primary);
  --element-button-color-secondary: var(--color-secondary);
}

/* BF (A11Y-026): the current page number in a paginated list (search results, long collections, the blog) was
   the text colour at 40% — #b3b4b8 on white, 2.07:1 — and a page number under the pointer was the same colour
   at 70% (about 4.2:1). Stock Expanse marks "you are here" by fading it; here it is the full text colour with
   an underline, so it is told apart by more than colour, and it carries aria-current (element.pagination.liquid). */
.element-pagination .element-pagination-page--current {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}
.element-pagination .element-pagination-page:not(.element-pagination-page--current):hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* BF (A11Y-028): white text drawn straight onto a photograph. Measured from rendered pixels on live, 2026-09-18
   (docs/accessibility/evidence/2026-09-18-text-measured-live/): the home product tiles had 64 to 99% of the
   pixels under their titles below 3:1, the hero's subtitle 92% below 4.5:1, the zero-waste banner 29 to 47%,
   and collection titles on a phone 15 to 24%. A photograph cannot promise a dark ground, so each gets a shade
   between the picture and the words — above the image (z-index 1), below the content (z-index 4), and never in
   the way of a click. (The home slideshow is not shaded here: its slides change often, and each is given a
   high-contrast picture and its own "Text protection" dimming in the theme editor — A11Y-029.) Strengths were set by measuring, not by eye: white needs a ground no lighter than about
   #767676 for 4.5:1, which takes 55 to 65% black over a near-white photograph. */

/* Home product tiles ("LEMON BAR"): the title sits at the foot of the tile, so the shade rises from the foot. */
.type-simple .promo-grid__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.6) 28%, rgba(0, 0, 0, 0) 62%);
}

/* The zero-waste banner on the zero-waste product pages: text across the middle of a bright photograph. */
.flex-grid__item--advanced_HW6V7N .promo-grid__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.5);
}

/* Collection banners: stock Expanse shades only the bottom-left corner (45deg, gone by the midpoint), which a
   title running across a phone outruns. The shade rises from the foot across the full width instead. */
.collection-hero__content.overlay::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 90%);
}





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

/* ==== INLINE TERM ===== */
/* BF (A11Y-001, session 7): a glossary term is a real <button> now, so it can be reached and operated from
   the keyboard. The theme's button styling is stripped so it still reads as a word in the sentence; the
   focus ring is the theme's, not removed; the info icon is a separate aria-hidden span, not generated
   content, so the button's name is the ingredient alone. */
.bf-term-wrap {
  display: inline;
}
.bf-term {
  -webkit-appearance: none;
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  text-decoration: none;
  white-space: inherit;
  min-height: 0;
  min-width: 0;
  width: auto;
  cursor: help;
  border-bottom: 1px dotted;
  transition: color .2s;
}
.bf-term:hover,
.bf-term:focus-visible,
.bf-term[aria-expanded="true"] {
  color: #2c7a7b;
  border-bottom-style: solid;
}
.bf-term:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: 2px;
}
.bf-term-icon {                  /* info icon */
  font-size: .8em;
  vertical-align: super;
  margin-left: .15em;
}

/* ==== 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;
  border: 1px solid #eaeded;
  display: none; /* decided to use alt visual solution */
}

/* 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: #666666;  /* BF (A11Y-001): was gray, 3.95:1 on white; 5.74:1 now that the pop-up is reachable */
  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 8px;
}

/* “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 .label{
  flex:0 0 60px;            /* fixed column */
  text-transform: uppercase;
  font-size: smaller;
  color: #666666;           /* BF (A11Y-001): was gray, 3.95:1 on white */
}


/* == 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 */
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  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;
}

/* 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.25em;
}

p.latin-name {
  font-family: serif;
  font-style: italic;
  font-size: .8rem;
  line-height: 2em;
  color: #666666; /* A11Y-005: 5.74:1 on white (was #b2babb, 1.97:1) */
}

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

.glossary-card .detail-label {
  text-transform: uppercase;
  font-family: 'JetBrains Mono', Menlo, monospace;
  font-size: .65rem;
  font-weight: bold;
  color: #666666; /* A11Y-005: 5.74:1 on white (was #b2babb, 1.97:1) */
  
  display: block; /* pushes 'detail-value' down to next line */
}

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





/* =========================
   Expanse 9.0 Collection tag adjustment
   ========================= */

/* 1) The gray rounded card is the anchor */
.product-grid-item {
  position: relative;
}

/* 2) Pull the tag container out of the image flow and pin it */
.product-grid-item .grid-product__tags {
  position: absolute !important;
  top: -20px;
  left: -20px;
  z-index: 50;
  pointer-events: none;
  width: auto;
}

/* 3) Make sure the layout-stack doesn't "eat" the box model */
.product-grid-item .grid-product__tags > layout-stack {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* 4) Keep Expanse hover behavior, but zoom ONLY the image */
.product-grid-item:hover .grid-product__image-wrap,
.product-grid-item:hover .grid__image-ratio {
  transform: none !important;
}

/* target the actual image element(s) */
.product-grid-item:hover img {
  transform: scale(1.05);
}

/* 5) Prevent the tag from ever scaling */
.product-grid-item .grid-product__tags,
.product-grid-item .grid-product__tags * {
  transform: none !important;
}





/* Store Availability Block */
div.store-availability {
  border: 1px dotted #F9E79F;
  background-color: #FEF9E7;
  border-radius: 12px;
  padding: 1em;
}

.product-block--sales-point {
  margin-bottom: -5px;
}




/* == 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-size: .8rem;
  text-transform:uppercase;
}
.bf-card-latin {
  margin:0 0 1.5rem 0;
  font-size:.6rem;
  color: #666666; /* A11Y-004: 5.74:1 on the card's white (was darkgray, 2.35:1) */
}
.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: .8rem;
    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;
}


/* 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;
  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 (A11Y-002: text #007471 on #e6f7ff, 5.1:1 — #007acc was 4.1:1) */
.bf-filter-group.open > .bf-filter-toggle {
  background: #e6f7ff;      /* subtle light-blue bg */
  border-color: #66c2ff;    /* slightly stronger border */
  color: #007471;
}

/* Smooth transition */
.bf-filter-group > .bf-filter-toggle {
  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 — a real <button> since A11Y-002, styled as the <strong> it replaced */
.bf-filter-group > .bf-filter-toggle {
  display: inline-block;
  cursor: pointer;
  padding: .6rem .9rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  transition: background .2s, border-color .2s;
}
.bf-filter-group > .bf-filter-toggle:hover {
  background: #f5f5f5;
  border-color: #bbb;
}
.bf-filter-group > .bf-filter-toggle:focus-visible,
.bf-filter-group .dropdown input:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: 2px;
}

/* A11Y-015: the product gallery's carousel is a Tab stop (Flickity gives it tabindex=0 so the arrow keys work)
   but showed nothing when focused; the thumbnails draw their own inset ring on focus. */
.product-slideshow:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: 2px;
}

/* 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;
  }

  /* 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 {
  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;
}

/* 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;
}
 









/* Safari iOS fix for Expanse 9 mobile nav with announcement bar offset */

/* STILL NEEDED on Expanse v10 — tested 2026-09-27 (session 14): with this block and the level-2 block below
   switched off on the development theme, the mobile menu broke on Casey's iPhone (announcement bar showing).
   v10's own "iOS Safari fix for body-scroll-lock" in snippets/header.drawer.liquid does not replace it.
   Do not remove as redundant; re-test on a real iPhone at each theme upgrade (QUESTIONS, answered session 14). */

/* Expanse 9 iOS Safari mobile nav fix */
@supports (-webkit-touch-callout: none) {

  :root {
    --bf-mobile-nav-top-offset: 33px; /* adjust if announcement bar height changes */
  }

  body[style*="position: fixed"] {
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Pin the header strip below any announcement/toolbar bar */
  body[style*="position: fixed"] header-nav#HeaderWrapper {
    position: fixed !important;
    top: calc(var(--bf-mobile-nav-top-offset) + env(safe-area-inset-top, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10020 !important;
    background: #fff !important;
    height: var(--header-nav-height, 58px) !important;
  }

  /* Keep top strip visible without re-laying it out */
  body[style*="position: fixed"] #SiteHeader,
  body[style*="position: fixed"] .site-header__element--top,
  body[style*="position: fixed"] .header-layout {
    position: relative !important;
    z-index: 10021 !important;
    background: #fff !important;
    min-height: var(--header-nav-height, 58px) !important;
  }

  /* Keep native header items above drawer */
  body[style*="position: fixed"] .header-item--logo,
  body[style*="position: fixed"] .header-item--icons,
  body[style*="position: fixed"] .site-nav__icons,
  body[style*="position: fixed"] toggle-menu,
  body[style*="position: fixed"] button.mobile-nav-trigger,
  body[style*="position: fixed"] button.mobile-nav-trigger.is-active {
    position: relative !important;
    z-index: 10022 !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: rgb(66, 67, 77) !important;
  }

  /* Keep the icon paintable without changing button layout */
  body[style*="position: fixed"] button.mobile-nav-trigger svg,
  body[style*="position: fixed"] button.mobile-nav-trigger.is-active svg,
  body[style*="position: fixed"] button.mobile-nav-trigger .element-icon,
  body[style*="position: fixed"] button.mobile-nav-trigger.is-active .element-icon {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Drawer sits below the pinned header strip */
  body[style*="position: fixed"] .site-header__mobile-nav {
    position: fixed !important;
    top: calc(
      var(--bf-mobile-nav-top-offset) +
      env(safe-area-inset-top, 0px) +
      var(--header-nav-height, 58px)
    ) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10010 !important;
    background: #fff !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Neutralize Safari transform weirdness */
  body[style*="position: fixed"] .site-header__drawer__animate,
  body[style*="position: fixed"] mobile-nav.slide-nav__wrapper,
  body[style*="position: fixed"] mobile-nav.slide-nav__wrapper.overlay {
    transform: none !important;
  }

  body[style*="position: fixed"] mobile-nav.slide-nav__wrapper,
  body[style*="position: fixed"] mobile-nav.slide-nav__wrapper.overlay {
    display: block !important;
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    background: #fff !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Safari iOS: give active level-2 mobile nav wrapper a little extra height */
@supports (-webkit-touch-callout: none) {
  body[style*="position: fixed"] mobile-nav.slide-nav__wrapper.overlay[data-level="2"][style] {
    min-height: 340px !important;
    height: auto !important;
  }
}

/* BF (A11Y-007): form fields — typed text at the colour scheme's full text colour, and the placeholder at an
   80% mix of it with no fading, so both clear 4.5:1 on the field's own background. Measured on the footer
   newsletter field (white field, text colour #42434d): typed text #7b7b82, 4.2:1 -> #42434d, 9.7:1; the
   placeholder #a1a1a6 at 50% opacity, about 1.6:1 as rendered -> #686870, 5.5:1. The theme sets the text
   shade in element.input (70% / 50%) and the placeholder's 0.5 opacity in head.styles.util.forms. Selectors
   outrank both regardless of stylesheet order. */
input.element-input,
textarea.element-input {
  --element-input-text-shade: 100%;
  --element-input-text-shade-placeholder: 80%;
}

input.element-input::placeholder,
textarea.element-input::placeholder {
  opacity: 1;
}

/* BF (A11Y-027): the same 0.5 fade (head.styles.util.forms: `::placeholder {color: inherit; opacity: .5}`) reached
   every field the theme does not draw itself — Klaviyo's sign-up pop-up sets its placeholder to #949596, 3.0:1,
   and the fade took it to about 1.6:1 as rendered; Judge.me's review search came out at 3.9:1. No placeholder
   on the store is faded now: each shows at the colour its own styles give it (input::placeholder, 0,0,2,
   outranks the stock rule's 0,0,1 whatever the stylesheet order). */
input::placeholder,
textarea::placeholder {
  opacity: 1;
}

/* BF (A11Y-044): the pause button of an autoplaying slideshow, visible to everyone (WCAG 2.2.2). In a hero slideshow
   module.slideshow.js gives it Flickity's arrow classes and puts it inside the carousel, so the theme's own arrow
   rules set its size, colours, bottom edge, shadow and hover (head.styles.component.flickity); here only its place
   along the row — one arrow's width and the arrows' own gap to the left of the previous arrow (desktop 90 + 40 + 10,
   phone 60 + 33 + 7) — and its icon, drawn as Flickity draws an arrow's (30% of the button, centred). Hidden until
   the script has placed it. */
.bf-slideshow-pause[hidden] {
  display: none;
}

.bf-slideshow-pause {
  padding: 0;
  cursor: pointer;
}

.bf-slideshow-pause--hero .element-icon {
  position: absolute;
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
}

.hero[data-arrows='true'] .bf-slideshow-pause--hero {
  right: 140px;
}

.hero[data-arrows='true'].flickity-rtl .bf-slideshow-pause--hero {
  right: auto;
  left: 140px;
}

@media only screen and (max-width: 768px) {
  .hero[data-arrows='true'] .bf-slideshow-pause--hero {
    right: 100px;
  }

  .hero[data-arrows='true'].flickity-rtl .bf-slideshow-pause--hero {
    right: auto;
    left: 100px;
  }
}

/* A slideshow with dots, bars or no controls has no arrow row: the button sits in its lower corner. */
.hero:not([data-arrows='true']) .bf-slideshow-pause--hero {
  top: auto;
  bottom: 20px;
  right: 20px;
  transform: none;
}

/* The announcement bar's (Casey, 2026-10-07): at the start of the bar, on the page's left edge (the toolbar's own
   padding, `--page-width-padding`, in line with the logo), the band button's size and shape (26px in a 33px bar),
   in the bar's own tones (Casey's option A, the same day): the circle is the bar's text colour at 15% over the bar,
   the icon the bar's text colour — so it follows whatever colour scheme the bar is given, with no colour of its own.
   The icon stays above 3:1 on its circle for any bar whose own text passes 4.5:1 (on the teal 4.2:1). The
   announcements start after it; on a phone they are centred in the room left beside it (about 249px at 320px). */
.bf-slideshow-pause--bar {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.15);
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}

.bf-slideshow-pause--bar .element-icon {
  position: absolute;
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
}

/* The margin is the wrapper's, not the slider's: Flickity lays its viewport over the slider's padding. */
.slideshow-wrapper:has(> .bf-slideshow-pause--bar) {
  padding-inline: 34px 0;
}

/* BF (A11Y-045): a hero slideshow is a Tab stop (Flickity gives it tabindex=0 for its arrow keys) and the theme takes
   its outline away (head.styles.component.flickity: `.flickity-enabled:focus {outline: none}`), so a keyboard user
   who reached it saw nothing. The ring is drawn inside it, since the slideshow runs edge to edge: white between two
   charcoal lines, so it shows on any picture. Above the slides (z-index 1, after them), below the buttons (2). */
.hero.flickity-enabled:focus-visible::after {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 1;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 2px #393839, inset 0 0 0 2px #393839;
  pointer-events: none;
}

/* BF (A11Y-046): the scrolling band's pause button (WCAG 2.2.2), placed by element.marquee.js beside the band. It
   looks like the slideshow arrows (head.styles.component.flickity: `.hero .flickity-button`, 40px, 33px on a phone)
   and sits at the band's left, on the page's left edge (`--page-width-padding`: 40px, 17px on a phone — in line with
   the logo and the announcement bar's button). The right end is where a slideshow's arrows hang over the band below
   it. Paused, or held by keyboard focus on the band's link, the scroll stops where it is. */
.element-marquee[data-paused] .element-marquee__wrapper,
.element-marquee[data-held] .element-marquee__wrapper {
  animation-play-state: paused;
}

.bf-marquee-host {
  position: relative;
}

.bf-marquee-toggle {
  position: absolute;
  top: 50%;
  left: var(--page-width-padding);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  color: var(--root-color-primary);
  background-color: var(--root-color-secondary);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}

.bf-marquee-toggle:hover {
  transform: translateY(-50%) scale(1.12);
}

.bf-marquee-toggle .element-icon {
  position: absolute;
  left: 35%;
  top: 35%;
  width: 30%;
  height: 30%;
}

@media only screen and (max-width: 768px) {
  .bf-marquee-toggle {
    width: 33px;
    height: 33px;
  }
}

/* In the toolbar (scrolling announcements, if switched on) the band is one line: a button its size. */
.toolbar .bf-marquee-toggle {
  left: 0;
  width: 26px;
  height: 26px;
  box-shadow: none;
}

/* BF (A11Y-047): the stock-level dot beside "Low stock" / "In stock" (block.product-inventory) pulsed every 2 s for
   as long as the page was open. Two pulses — 4 s, under the 5 s after which WCAG 2.2.2 asks for a way to stop
   moving content — then the dot rests as it is drawn without the animation; none under "reduce motion". */
.element-icon--inventory:before {
  animation-iteration-count: 2;
}

@media (prefers-reduced-motion: reduce) {
  .element-icon--inventory:before {
    animation: none;
  }
}

/* BF (floating buttons, Casey 2026-10-06): AMP's wishlist button (Back in Stock & Preorder; `#amp-wishlist-button`,
   fixed 20px from the lower right by the app's script, which has no setting for it) sat under Smile's Rewards
   launcher in the same corner — entirely on a desktop, 77% on a phone. It is shown only where a shopper is choosing
   products (product, collection and search pages) and there it stands above Rewards, right edges aligned: Smile's
   desktop launcher is 60px tall at 20px, so 20 + 60 + 12; on a touch phone it is 44px at 16px, so 16 + 44 + 8.
   `body` outranks the style the app adds after this one. If AMP renames the button these rules stop applying and the
   overlap returns (A11Y-014 records it). */
body:not(.template-product):not(.template-collection):not(.template-search) #amp-wishlist-button {
  display: none;
}

body #amp-wishlist-button {
  bottom: 92px;
}

@media (hover: none) and (pointer: coarse) {
  body #amp-wishlist-button {
    right: 16px;
    bottom: 68px;
  }
}

/* BF (perf, session 24): moved here from bf-blog.css, which now loads on the blog only. The collection filters'
   remove tags (.tag--inline, list.filter-grid.filters) took this hover from it on every page; kept as it was. */
.tag--inline:hover {background-color: lightgray;}