/** Shopify CDN: Minification failed

Line 4813:0 Comments in CSS use "/* ... */" instead of "//"
Line 5804:27 Expected identifier but found "!"
Line 5805:34 Expected identifier but found "!"
Line 9819:3 Unexpected "="

**/
/* Collapse behavior */
.bw-setup-console.is-collapsed .bw-console-fields {
  display: none !important;
}

/* Global field layout */
.bw-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.bw-field__label,
.bw-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
}

.bw-field__input,
.bw-input {
  width: 100%;
}

.bw-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.bw-field--inline .bw-field__label {
  margin: 0;
  white-space: nowrap;
}


/* Main calculator column */
.bw-calculators {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 3rem 1rem;
}

.bw-calculators__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Calculator cards */
.bw-card__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.bw-results,
#qb-additional-liquid-container {
  grid-column: 1 / -1;
}

/* Add-ins + summary */
.bw-addins {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bw-addins__header {
  display: grid;
  grid-template-columns: 1fr 120px;
  font-weight: 600;
  font-size: 0.9rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid #eee;
}
/* ============================================================
   ADD-INS + SUMMARY GRIDS
   ============================================================ */

.bw-addins__row {
  display: grid;
  grid-template-columns: 1fr 120px auto;
  gap: 0.75rem;
  align-items: center;
}

.bw-grid--summary,
.bw-grid--liquids {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.bw-hidden {
  display: none !important;
}

.bw-field--full {
  grid-column: 1 / -1;
}

.bw-button--link {
  background: none;
  border: none;
  color: #5b4a33;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-left: 0.5rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.bw-button,
[data-bw-mold-apply] {
  margin-top: 0.35rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: #f3e8d2;
  border: 1px solid #d8cbb3;
  border-radius: 4px;
  color: #5a5245;
  cursor: pointer;
}

.bw-button:hover,
[data-bw-mold-apply]:hover {
  background: #e9dcc2;
}
/* ============================================
   Field Rows — Aligned Beneath Each Title
   ============================================ */

.bw-section__row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bw-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.bw-field__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #5b4a33;
}
/* ============================================================
   RECIPE CARD — INLINE ACCORDION PANELS
   ============================================================ */

.bw-recipe-card-panels {
  max-width: 200px;   /* or match your recipe card width */
  margin: 0 auto;     /* centers it */
}

.bw-panel {
  position: relative;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  margin: 0 0 0.5rem 0;
  background: white;
  border-radius: 6px;
  box-shadow: none;
  transition: max-height 0.3s ease;
}

.bw-panel.is-open {
  max-height: 2000px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.bw-panel-content {
  padding: 0.75rem 1rem;
}

.bw-panel-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: #444;
  z-index: 20;
}

/* ---------------------------------------------
   NUMBERS PANEL — COMPACT LIST SPACING
---------------------------------------------- */

.bw-numbers-col ul {
  margin: 0;              /* remove browser default */
  padding: 0;             /* remove left indent */
  list-style: none;       /* remove bullets */
}

.bw-numbers-col li {
  margin: 0;              /* remove extra vertical space */
  padding: 0.1rem 0;      /* tighten row height */
  line-height: 1.1;       /* compact text */
  font-size: 0.9rem;      /* optional: slightly smaller */
}

.bw-panel-auto {
  display: block;
}

/* Ingredient grid */
.bw-recipe-card-ingredients {
  display: grid;
  grid-template-columns: auto;
  column-gap: auto;
  row-gap: 0.30rem;
}

/* ============================================================
   GLOBAL FIELD STYLING
   ============================================================ */

.bw-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}


.bw-field__input,
.bw-input {
  width: 100%;
}

.bw-field--inline {
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}

.bw-field--inline .bw-field__label {
  margin: 0;
  white-space: nowrap;
}

/* ============================================================
   INLINE FIELD SYSTEM — CLEAN + CONSOLIDATED
   ============================================================ */

/* Inline field pair */
.bw-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 1rem;
  margin-bottom: 0.5rem;
  white-space: nowrap;
}

.bw-inline-field input {
  width: 2rem;
  padding: 0.25rem 0.35rem;
  font-size: 0.9rem;
}

/* Inline rows (global) */
.bw-inline {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: center;
  column-gap: 0.5rem;
  margin-bottom: 0.15rem;
}

/* Labels inside inline rows */
.bw-inline .bw-field__label {
  margin: 0;
  white-space: nowrap;
  text-align: left;
}

/* Inputs inside inline rows */
.bw-inline .bw-field__input {
  display: flex;
  gap: 0.35rem;
}

/* Inline wrap container */
.bw-inline-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  row-gap: 0.15rem;
}

/* Full-width field spacing */
.bw-field {
  margin-bottom: 0.2rem;
}


.bw-recipe-card-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  align-items: start;
}
/* === Two Column Grid === */
.bw-recipe-card-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2rem;
  align-items: start;
}
.bw-recipe-card-ingredients .ingredient,
.bw-recipe-card-outputs .ingredient {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;
}
/* Row layout: pull amount closer to name */
.bw-recipe-card-ingredients .ingredient,
.bw-recipe-card-outputs .ingredient {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;  /* no more forced canyon */
  flex-wrap: nowrap;
  padding: 0.1rem 0;
  margin: 0;
}

.bw-recipe-card-ingredients .ingredient .label {
  white-space: normal !important;
}

/* Amount */
.bw-recipe-card-ingredients .ingredient .value,
.bw-recipe-card-outputs .ingredient .value {
  margin-left: 0.4rem;  /* controls gap */
  text-align: right;
  white-space: nowrap;
}
/* === Force vertical stacking in both columns === */
.bw-recipe-card-ingredients,
.bw-recipe-card-outputs {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* === Ingredient row layout === */
.bw-recipe-card-ingredients .ingredient,
.bw-recipe-card-outputs .ingredient {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: nowrap;
  padding: 0.1rem 0;
  margin: 0;
}

/* === Label width === */
.bw-recipe-card-ingredients .ingredient .label,
.bw-recipe-card-outputs .ingredient .label {
  flex: 0 0 42%;
  white-space: nowrap;
}

/* === Value alignment === */
.bw-recipe-card-ingredients .ingredient .value,
.bw-recipe-card-outputs .ingredient .value {
  flex: 1;
  text-align: right;
  white-space: nowrap;
}
.rc-additive .label {
  flex: 1 !important;
}
.rc-additive .value {
  flex: 0 0 auto !important;
}

/* === Outer padding === */
.bw-recipe-card-body {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
/* Tighten spacing for real ingredient rows */
.bw-recipe-card-body .ingredient {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.05rem 0;
  margin: 0;
}

/* Shrink name width */
.bw-recipe-card-body .ingredient .label {
  flex: 0 0 30%;
  white-space: nowrap;
  margin-right: 0.25rem;
}

/* Align amount */
.bw-recipe-card-body .ingredient .value {
  flex: 1;
  text-align: right;
  white-space: nowrap;
}
.bw-recipe-card-toggles {
  width: auto;
  max-width: max-content;
  flex-shrink: 1;
}

  .bw-recipe-shell {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}
.bw-recipe-shell {
  display: block !important;
  max-width: none !important;
  width: 100% !important;
}
.bw-recipe-card-wrapper {
  margin: 0 auto;
  max-width: 700px; /* or whatever matches your layout */
}
/* ---------------------------------------------
   SIGNATURE RECIPE — FULL LAYOUT RESET
   Forces a clean 2‑column layout, stops stacking
   --------------------------------------------- */

.bw-signature .bw-card__body {
  display: block !important;
  width: 100% !important;
}

/* Master grid wrapper */
.bw-signature .bw-card__body > .bw-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) !important;
  gap: 1.5rem !important;
  align-items: start !important;
  width: 100% !important;
}

/* Hidden custom fields */
.bw-hidden {
  display: none !important;
}
.bw-card__body .bw-grid {
  display: grid;
  grid-template-columns: 2fr 1.4fr;
  gap: 1.25rem;
  width: 100%;
}
.bw-recipe-card {
  max-width: none !important;
  width: 100% !important;
}
.page-with-sidebars .main-content {
  max-width: none !important;
  width: 100% !important;
}

.bw-layout-desktop {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}


/* ---------------------------------------------
   Recipe Card: Align Name Left, Percent Right
----------------------------------------------*/
.bw-sr-label {
  flex: 1;
  text-align: left;
}

.bw-sr-value {
  min-width: 3ch;
  text-align: right;
  white-space: nowrap;
}

.bw-sr-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bw-sr-label {
  flex: 1;
  text-align: left;
}

.bw-sr-value {
  width: 3ch;        /* ← forces perfect column alignment */
  text-align: right;
  white-space: nowrap;
}

/* Name column */
.bw-sr-label {
  flex: 1;
  text-align: left;
}

/* Percent column — fixed width for perfect alignment */
.bw-sr-value {
  width: 3.5ch;      /* enough for 100% */
  text-align: right;
  white-space: nowrap;
}
/* Placeholder */
select.bw-input[data-state="placeholder"] {
  color: var(--bw-placeholder-color,rgb(165, 33, 51));
}
[data-bw-pref-oil-weight]::placeholder {
  color: var(--bw-placeholder-color,rgb(165, 33, 51)); /* or your exact red tone */
  opacity: 1;  /* ensures full visibility across browsers */
}
/* Inputs */
.bw-input::placeholder {
  color: var(--bw-placeholder-color, rgb(165, 33, 51));
  opacity: 1;
}

/* Select placeholders */
select.bw-input option[disabled][value=""] {
  color: var(--bw-placeholder-color, rgb(165, 33, 51));
}

/* Select default state uses placeholder color */
select.bw-input {
  color: var(--bw-placeholder-color, rgb(165, 33, 51));
}

/* ---------------------------------------------
   ADDITIVE ROW REMOVE BUTTON — MATCH CONSOLE RED
---------------------------------------------- */
[data-bw-rc-additive-remove-btn] {
   color: solid #d4af37;
    cursor: pointer;
}

/* ---------------------------------------------
   RECIPE CARD — OIL REMOVE BUTTON COLOR
---------------------------------------------- */
.rc-remove-oil,
[data-bw-rc-remove-oil] {
    color: solid #d4af37;
    cursor: pointer;
}


.bw-accordion {
  border-bottom: 1px solid #e5e5e5;
  padding: 10px 0;
}

.bw-accordion__toggle {
  background: none;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 8px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.bw-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.bw-accordion__links {
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
}

.bw-accordion__links a {
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  display: block;
  padding: 4px 0;
}

.bw-accordion__links a:hover {
  color: #c4a46a;
}
.bw-accordion__toggle {
  font-size: 1.1rem;   /* change this */
  font-weight: 600;    /* change this */
  padding: 8px 0;      /* spacing */
}
.bw-accordion__links a {
  font-size: 0.40rem;  /* change this */
  padding: 4px 0;      /* spacing */
  color: #333;         /* text color */
}
.bw-accordion__content {
  padding: 10px 0;     /* spacing inside */
}
.bw-sidebar {
  font-family: var(--font-serif);
  font-size: .85rem;     /* global size */
}

/* -------------------------------------- */
/* FULL-BLEED TOP BANNER INSIDE WRAPPER   */
/* -------------------------------------- */

.bw-top-banner {
  position: relative;
  left: -1rem;                 /* match wrapper padding */
  width: calc(100% + 2rem);    /* 2 × padding */
  margin-top: 0;
  margin-bottom: .5rem;
  text-align: center;
}

.bw-top-banner__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
/* -------------------------------------- */
/* SUBTLE FULL BORDER AROUND MAIN SECTION */
/* -------------------------------------- */

.bw-calc-wrapper {
  background: #fff; /* or your cream tone */
  border: 1px solid rgba(0, 0, 0, 0.5); /* soft line like review card */
  border-radius: 12px;
  padding: 1rem;
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.04); /* faint outer glow */
}
/* -------------------------------------- */
/* SUBTLE FULL BORDER FOR BOTH SIDEBARS   */
/* -------------------------------------- */

.bw-layout-left, 
.bw-layout-right {
  background: #fff; /* or your cream tone */
  border: 1px solid rgba(0, 0, 0, 0.5); /* same soft line as main section */
  border-radius: 12px;
  padding: .5rem;
  box-shadow:
    0 0 6px rgba(0, 0, 0, 0.04); /* faint outer glow */
}
/* -------------------------------------- */
/* CENTER CONTENT INSIDE BOTH SIDEBARS    */
/* -------------------------------------- */

.bw-sidebar-left,
.bw-sidebar-right {
  text-align: center;
}

.bw-sidebar-left img,
.bw-sidebar-right img {
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* -------------------------------------- */
/* CENTER IMAGES INSIDE BOTH SIDEBARS     */
/* -------------------------------------- */

.bw-sidebar-left img,
.bw-sidebar-right img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* -------------------------------------- */
/* TIGHTER BLOCK SPACING IN SIDEBARS      */
/* -------------------------------------- */

.bw-sidebar-left .shopify-section,
.bw-sidebar-right .shopify-section {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.bw-sidebar-left *,
.bw-sidebar-right * {
  max-width: 100%;
}
.bw-sidebar-left,
.bw-sidebar-right {
  padding: .2rem;
}
/* -------------------------------------- */
/* REMOVE WIDTH CONSTRAINTS IN SIDEBARS   */
/* -------------------------------------- */

.bw-layout-left *,
.bw-layout-right * {
  max-width: 100% !important;
  box-sizing: border-box;
}
/* -------------------------------------- */
/* CENTER SIDEBAR BLOCK CONTENT + IMAGES  */
/* -------------------------------------- */

.bw-layout-left .shopify-section,
.bw-layout-right .shopify-section {
  text-align: center;
}

.bw-layout-left img,
.bw-layout-right img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------- */
/* MOBILE STACKING FOR BUILDER FIELDS     */
/* -------------------------------------- */

.bw-sr-row-2,
.bw-inline {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.bw-sr-row-2 > *,
.bw-inline > * {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* -------------------------------------- */
/* UNIFY INPUT + SELECT FONT WEIGHT/HEIGHT */
/* -------------------------------------- */

.bw-console input,
.bw-console select {
  font-size: 0.60rem;     /* small enough to fit, not tiny */
  font-weight: 385;       /* lighter, not bold */
  line-height: 1.3;       /* prevents descender clipping */
  padding: 0.3rem 0.4rem; /* keeps boxes tidy */
}

.bw-console select {
  -webkit-appearance: none;
  appearance: none;
}
/* -------------------------------------- */
/* CENTERED TEXT + DESCENDER ROOM         */
/* -------------------------------------- */

.bw-console input,
.bw-console select {
  font-size: 0.60rem;
  font-weight: 385;
  line-height: 1.3;
  padding-top: 0.4rem;
  padding-bottom: 0.45rem;
  text-align: center;
}

#shopify-section-bw-calc.shopify-section {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.bw-recipe-card-wrapper,
.bw-recipe-card,
.bw-recipe-card-body,
.bw-recipe-card-columns {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* ----------------------------------------------------
   2. Allow main-content to be full width
---------------------------------------------------- */
.main-content {
  max-width: none !important;
  width: 100% !important;
}

/* ----------------------------------------------------
   3. Desktop 3-column layout (your original, untouched)
---------------------------------------------------- */
.bw-layout-desktop {
  display: grid;
  grid-template-columns: 1fr minmax(0, 3fr) 1fr;
  gap: .5rem;

  /* remove width choke */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* ----------------------------------------------------
   5. Remove theme width choke from Shopify section
---------------------------------------------------- */
#shopify-section-bw-calc.shopify-section {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
.bw-calc-wrapper * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.bw-layout-left,
.bw-layout-right {
  min-width: 0 !important;
}

.bw-layout-left *,
.bw-layout-right * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.bw-layout-left,
.bw-layout-right {
  min-width: 0 !important;
}

.bw-layout-left *,
.bw-layout-right * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.recipe-card-columns > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.bw-recipe-card-wrapper *,
.bw-recipe-card *,
.bw-recipe-card-body *,
.recipe-card-columns * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.bw-layout-main,
.bw-layout-desktop {
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
.bw-console-wrapper,
.bw-console,
.bw-console-body {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.bw-recipe-card-wrapper,
.bw-recipe-card,
.bw-recipe-card-body {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.recipe-card-columns,
.recipe-card-columns * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force both columns to fill their half of the grid */
.recipe-card-columns > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force inner wrappers in the right column to expand fully */
.recipe-card-columns .bw-recipe-card-group,
.recipe-card-columns .bw-recipe-card-field {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.bw-recipe-card-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 1rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.bw-recipe-card-columns > * {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Reduce space between top banner and console header */
.bw-top-banner-outer {
  margin-bottom: 0.5rem; /* tighten or set to 0 */
}

.bw-console__header {
  margin-top: 0; /* removes Broadcast's default section spacing */
  padding-top: 0;
}

/* FIX: bw-inline MUST NOT STRETCH FULL WIDTH */
.bw-inline {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
}

.bw-inline {
  flex-direction: row !important;
}

.bw-sr-additives .bw-sr-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr min-content 100px; /* name | amt | unit */
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

/* Custom field overlays the first column */
.bw-sr-additives [data-bw-sr-additive-custom-wrapper] {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 150px); /* leaves room for amt + unit */
  display: none; /* hidden until JS shows it */
}

.bw-sr-additives [data-bw-sr-additive-custom-wrapper].bw-visible {
  display: block;
}
.bw-sr-additives [data-bw-sr-additive-custom-wrapper] {
  position: relative !important;
  grid-column: 1 / 2 !important;
  width: 100% !important;
}
.bw-sr-additives .bw-sr-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.bw-sr-additives .bw-sr-row > * {
  width: auto !important;
  max-width: none !important;
}
.bw-sr-additives .bw-sr-row {
  grid-template-columns: 1fr max-content 100px !important;
}
.bw-recipe-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* TOP ROW: Blend | Liquid | Fragrance */
.bw-sr-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  align-items: center;
}
.bw-sr-linefield .bw-sr-linevalue {
  display: flex;
  align-items: center;
  height: 20px; /* or whatever Liquid’s linevalue height is */
  line-height: 20px;
  white-space: nowrap;
}
.bw-sr-top,
.bw-sr-row,
.bw-sr-grid {
  align-items: start !important;
}
/* Oil name width */
select[data-bw-sr-oil] {
  width: 20ch !important;
}

/* Percent width */
select[data-bw-sr-pct] {
  width: 6ch !important;
}
/* Make the oil row inline and flexible */
[data-bw-sr-oil-row] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Allow the oil-name container to grow */
[data-bw-sr-oil-row] .bw-field__input:first-of-type {
  flex: 1 1 auto;
}

/* Oil name width */
[data-bw-sr-oil-row] select[data-bw-sr-oil] {
  width: 20ch;
}

/* Percent width */
[data-bw-sr-oil-row] select[data-bw-sr-pct] {
  width: 6ch;
  flex: 0 0 auto;
}
/* Force oil row to be a horizontal flex container */
.bw-inline[data-bw-sr-oil-row] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* Allow the first field (oil select container) to expand */
.bw-inline[data-bw-sr-oil-row] .bw-field__input:first-of-type {
  flex: 1 1 auto !important;
  min-width: 20ch !important;
}

/* Oil select width */
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-oil] {
  width: 20ch !important;
}

/* Percent select width */
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-pct] {
  width: 6ch !important;
  flex: 0 0 auto !important;
}
/* Force the oil row to be a real horizontal flex container */
[data-bw-sr-oil-row] {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
}

/* THIS is the real fix: unlock the oil-name container */
[data-bw-sr-oil-row] .bw-field__input:first-of-type {
  flex: 1 1 20ch !important;
  width: auto !important;
  min-width: 20ch !important;
  max-width: none !important;
}

/* Oil select width */
[data-bw-sr-oil-row] select[data-bw-sr-oil] {
  width: 20ch !important;
}

/* Percent select width */
[data-bw-sr-oil-row] select[data-bw-sr-pct] {
  width: 6ch !important;
  flex: 0 0 auto !important;
}
/* UNLOCK the children inside the oil row */
[data-bw-sr-oil-row] .bw-field__input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
}
/* Remove the ghost label from oil rows */
[data-bw-sr-oil-row] .bw-field__label {
  display: none !important;
}
/* Tight, clean horizontal layout for oil row */
[data-bw-sr-oil-row] {
  display: flex !important;
  align-items: center !important;
  gap: 0.25rem !important; /* tighten spacing between fields */
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Oil-name container expands naturally */
[data-bw-sr-oil-row] .bw-field__input:first-of-type {
  flex: 1 1 auto !important;
  min-width: 20ch !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Percent container stays tight */
[data-bw-sr-oil-row] .bw-field__input:nth-of-type(2) {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Oil select width */
[data-bw-sr-oil-row] select[data-bw-sr-oil] {
  width: 20ch !important;
  margin: 0 !important;
}

/* Percent select width */
[data-bw-sr-oil-row] select[data-bw-sr-pct] {
  width: 6ch !important;
  margin: 0 !important;
}
/* ───────────────────────────────
   TOP ROW UNIFORM FIELD WIDTHS
   Blend • Liquid • FO/EO = 20ch
   % / amt / unit fields = 9ch
   ─────────────────────────────── */

.bw-sr-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* 20ch fields */
.bw-sr-blend select,
.bw-sr-liquid select,
.bw-sr-liquid input[data-bw-sr-liquid-custom],
.bw-sr-foeo input[data-bw-sr-foeo] {
  width: 20ch;
  max-width: 20ch;
  min-width: 20ch;
  box-sizing: border-box;
  color: var(--bw-sr-blend, rgb(165, 33, 51));
}

/* FO/EO is a % field → 9ch */
.bw-sr-foeo input[data-bw-sr-foeo] {
  width: 9ch;
  max-width: 9ch;
  min-width: 9ch;
}

/* Ensure hidden custom liquid doesn’t break alignment */
[data-bw-sr-liquid-custom-wrapper].bw-hidden {
  display: none !important;
}
/* ───────────────────────────────
   TOP ROW UNIFORM FIELD WIDTHS
   Blend • Liquid • FO/EO = 20ch
   % / amt / unit fields = 9ch
   ─────────────────────────────── */

.bw-sr-top {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* 20ch fields */
.bw-sr-blend select,
.bw-sr-liquid select,
.bw-sr-liquid input[data-bw-sr-liquid-custom],
.bw-sr-foeo select[data-bw-sr-foeo] {
  width: 20ch;
  max-width: 20ch;
  min-width: 20ch;
  box-sizing: border-box;
}

/* Hidden custom liquid stays hidden */
[data-bw-sr-liquid-custom-wrapper].bw-hidden {
  display: none !important;
}
/* Center the whole top row inside its parent */
.bw-sr-top {
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: flex-start;
  width: 100%;
}

/* Unlock full width for Signature Recipe card */
#bw-signature-recipe.bw-card,
#bw-signature-recipe .bw-card__body,
#bw-signature-recipe .bw-sr-layout {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Fully unlock width inside the Signature Recipe card */
#bw-signature-recipe .bw-card__body,
#bw-signature-recipe .bw-sr-layout {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}
/* Remove global card width clamp ONLY for Signature Recipe */
#bw-signature-recipe.bw-card,
#bw-signature-recipe .bw-card__body {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
/* Fully unlock width for the Signature Recipe card and its body */
#bw-signature-recipe.bw-card,
#bw-signature-recipe,
#bw-signature-recipe .bw-card__body {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Remove inherited width clamp from the recipe shell inside Signature Recipe */
#bw-signature-recipe .bw-recipe-shell {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Unlock console wrapper width ONLY inside Signature Recipe */
#bw-signature-recipe .bw-console-wrapper {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Unlock the Shopify section wrapper for the calculator */
#shopify-section-bw-calc {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Unlock Shopify's global page-width clamp ONLY for the calculator section */
#shopify-section-bw-calc .page-width,
#shopify-section-bw-calc .page-width--narrow,
#shopify-section-bw-calc .content-container,
#shopify-section-bw-calc .main-content {
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box;
}
/* Unlock the calc wrapper inside the bw-calc section */
#shopify-section-bw-calc .bw-calc-wrapper {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}
/* Unlock width clamp on layout-main ONLY inside the calc section */
#shopify-section-bw-calc .bw-layout-main {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

/* Make each additive row a clean horizontal flex row */
.bw-sr-additives .bw-sr-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

/* Additive selector expands to fill the row */
.bw-sr-additives .bw-sr-row > select[data-bw-sr-additive] {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
}

/* Custom additive input stays compact */
.bw-sr-additives .bw-sr-row [data-bw-sr-additive-custom-wrapper] {
  flex: 0 0 auto;
  width: 8rem; /* safe, readable */
  max-width: 8rem;
}

/* Amount selector stays compact */
.bw-sr-additives .bw-sr-row select[data-bw-sr-additive-amount] {
  flex: 0 0 auto;
  width: 4.5rem;
  max-width: 4.5rem;
}

/* Tighten vertical spacing between additive rows */
.bw-sr-additives {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
/* Universal row tightening */
.bw-sr-top,
.bw-sr-oils,
.bw-sr-oils .bw-sr-row,
.bw-sr-additives,
.bw-sr-additives .bw-sr-row,
.bw-sr-liquid,
.bw-sr-liquid .bw-sr-row {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  gap: 0.25rem !important; /* tighten spacing */
}

/* Tighten spacing inside the main bottom container */
.bw-sr-bottom {
  gap: 0.2rem !important;
}
/* Match additive row spacing to oil row spacing */
.bw-sr-additives .bw-sr-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem !important; /* same as oils */
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove extra padding/margins from additive fields */
.bw-sr-additives .bw-sr-row > * {
  margin: 0 !important;
  padding: 0 !important;
}

/* Additive selector stretches */
.bw-sr-additives .bw-sr-row > select[data-bw-sr-additive] {
  flex: 1 1 auto;
  width: 249.96 !important;
}

/* Custom wrapper compact */
.bw-sr-additives [data-bw-sr-additive-custom-wrapper] {
  flex: 0 0 auto;
  width: 8rem;
  max-width: 8rem;
}

/* Amount selector compact */
.bw-sr-additives select[data-bw-sr-additive-amount] {
  flex: 0 0 auto;
  width: 4.5rem;
  max-width: 4.5rem;
}

/* Tighten spacing between additive rows */
.bw-sr-additives {
  display: flex;
  flex-direction: column;
  gap: 0.35rem !important;
}
/* Restore normal input height for additive fields */
.bw-sr-additives .bw-sr-row select,
.bw-sr-additives .bw-sr-row input {
  padding: 0.35rem 0.5rem !important; /* same rhythm as oils */
  height: auto !important;
  line-height: 1.2 !important;
}

/* Keep the row itself tight */
.bw-sr-additives .bw-sr-row {
  gap: 0.35rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep additive rows stacked tightly */
.bw-sr-additives {
  gap: 0.35rem !important;
}

/* Also remove hidden padding inside field wrappers */
.bw-field,
.bw-field__input {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
/* Make additive selects and inputs the same height as oils */
.bw-sr-additives select,
.bw-sr-additives input {
  padding: 0.45rem 0.5rem !important;  /* identical vertical rhythm to oils */
  line-height: 1.2 !important;
  height: auto !important;
  box-sizing: border-box;
}
/* Universal input height normalization */
.bw-sr-oils select,
.bw-sr-oils input,
.bw-sr-additives select,
.bw-sr-additives input,
.bw-sr-liquid select,
.bw-sr-liquid input {
  padding: 0.45rem 0.5rem !important;  /* consistent vertical + horizontal padding */
  line-height: 1.2 !important;
  height: auto !important;
  box-sizing: border-box;
}

/* Keep oil + percent on the same row */
.bw-sr-oils {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem; /* small space between them */
}

.bw-sr-oils {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.bw-sr-oils select[data-bw-sr-oil] {
  width: 20ch;
}

.bw-sr-oils select[data-bw-sr-pct] {
  width: 7ch;
}

.rc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding-top: 4px;
}
.rc-col.rc-label {
  flex: 1;
  white-space: nowrap;
}

.rc-col.rc-value {
  text-align: right;
  white-space: nowrap;
}
/* ---------------------------------------------
   EO BLEND SECTION — LUXURY COMBO STYLING
   --------------------------------------------- */
/* ---------------------------------------------
   EO BLEND — EMPTY STATE LOGIC (FIXED)
   --------------------------------------------- */

.rc-eoblend-row .rc-label span:empty::before {
  content: none;
}

/* Collapse the entire row ONLY when both name and value are empty */
.rc-eoblend-row[data-empty="true"] {
  display: none;
}
/* Show EO rows unless explicitly marked empty */
.rc-eoblend-row:not([data-empty="true"]) {
  display: flex !important;
}
/* EO Blend "Exceeds" warning — force normal case, normal weight, aligned, red, pulsing */
/* Make the EO safety row a flex row */
.bw-sr-eoblend-safe {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* EO Blend "Exceeds" warning — force normal case, normal weight, aligned, red, pulsing */
.safe-heart + span,
[data-bw-eoblend-warning],
.eo-warning {
    font-weight: 400 !important;          /* regular font */
    font-size: 1rem !important;         /* readable */
    text-transform: none !important;      /* STOP ALL CAPS */
    color: #b30000 !important;            /* deep luxury red */
    display: block !important;
    margin-top: 4px !important;
    text-align: right !important;         /* aligns under grams */
    animation: eoPulse 1.2s ease-in-out 0s 2 !important;
}

/* Subtle double flash */
@keyframes eoPulse {
    0%   { opacity: 1;   transform: scale(1); }
    40%  { opacity: 0.2; transform: scale(1.03); }
    70%  { opacity: 1;   transform: scale(1); }
    100% { opacity: 1;   transform: scale(1); }
}
/* Soft cream background + gold accent bar */
.rc-section.rc-eoblend {
  background: #faf7f2;              /* warm cream */
  padding: 12px 14px;
  border-radius: 6px;
  margin: 14px 0;
  border-left: 3px solid #d4af37;   /* gold accent */
}

/* Gold underline under EO Blend header */
.rc-eoblend-header {
  border-bottom: 2px solid #d4af37;
  padding-bottom: 4px;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Indent EO rows slightly */
.rc-eoblend-row {
  padding-left: 14px;
  margin: 2px 0;
}

/* Gold bullet before each EO name */
.rc-eoblend-row .rc-label span::before {
  content: "• ";
  color: #d4af37;
  font-weight: bold;
}

/* Keep label/value aligned on one line */
.rc-eoblend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}

/* Label column */
.rc-eoblend-row .rc-label {
  flex: 1;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Value column */
.rc-eoblend-row .rc-value {
  text-align: right;
  white-space: nowrap;
  font-size: 1.5rem;
  font-weight: 500;
}

/* END EO BLEND CARD*/
/* LEFT COLUMN — anchor EO Blend to bottom */
.bw-recipe-card-ingredients {
  display: flex;
  flex-direction: column;
}


/* RIGHT COLUMN — anchor Additives to bottom */
.bw-recipe-card-outputs {
  display: flex;
  flex-direction: column;
}

/* Push Additives section to bottom of right column */
.rc-section.rc-additives {
  margin-top: auto;
}
/* Collapse EO rows when the name span is empty */
.rc-eoblend-row[data-bw-rc-eoblend-row] {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* When the name span has content, show the row */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* Final rule: show the whole row only when name span has content */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* Show row when name span has content */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* Actual working rule */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty::before {
  content: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty::before {
  content: none;
}

/* Show the row only when the name span has content */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty)::before {
  content: "• ";
  color: #d4af37;
  font-weight: bold;
}

/* Hide entire row when name span is empty */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty::before {
  content: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}
/* Collapse EO rows when the name span is empty */
.rc-eoblend-row[data-bw-rc-eoblend-row] {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* When the name span has content, show the row */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* Final rule: show the whole row only when name span has content */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* Show row when name span has content */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:not(:empty) {
  display: inline;
}

/* Actual working rule */
.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty::before {
  content: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty {
  display: none;
}

.rc-eoblend-row[data-bw-rc-eoblend-row] .rc-label span:empty::before {
  content: none;
}

/* Give the left column more width, right column less */
.bw-recipe-card-ingredients {
  flex: 1.4;   /* wider */
}

/* Reduce vertical spacing inside the right column */
.bw-recipe-card-outputs {
  gap: 6px; /* adjust tighter or looser */
}
/* Give left column more room, shrink right column */
.bw-recipe-card-ingredients {
  flex: 1.6;
}

.bw-recipe-card-outputs {
  flex: 0.8;
}
/* Tighten vertical spacing inside the right column */
.bw-recipe-card-outputs {
  gap: 4px; /* adjust to taste */
}
/* Tighten EO Blend header height */
.rc-eoblend-header {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2px;
  line-height: 1.05;
}
/* Add inner padding around the entire recipe card */
.bw-recipe-card-columns {
  padding: 14px;   /* adjust to taste */
}
/* Tighten vertical spacing between EO Blend and Additives */
.rc-section.rc-eoblend {
  margin-bottom: 1px !important;
  margin-top: 1px !important;
}
.bw-recipe-card-outputs {
  display: flex;
  flex-direction: column;
}
.rc-section.rc-additives {
  margin-top: 1px !important;
  margin-bottom: 0px !important;
}
/* ---------------------------------------------
   ADDITIVES SECTION — LUXURY COMBO STYLING
   --------------------------------------------- */
   /* Spacer that pushes Additives downward */
.bw-recipe-card-outputs::after {
  content: "";
  flex-grow: 1;
}
/* Match Additives header height to EO Blend */
.rc-additives-header {
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 2px;
  line-height: 1.05;
}

/* Match Additives internal padding to EO Blend */
.rc-section.rc-additives {
  padding: 6px 12px;
}
/* Soft cream background + gold accent bar */
.rc-section.rc-additives {
  background: #faf7f2;              /* warm cream */
  padding: 12px 14px;
  border-radius: 6px;
  margin: 14px 0;
  border-left: 3px solid #d4af37;   /* gold accent */
}

/* Gold underline under Additives header */
.rc-additives-header {
  border-bottom: 2px solid #d4af37;
  padding-bottom: 4px;
  margin-bottom: 8px;
  font-weight: 600;
}

/* Indent additive rows slightly */
.rc-additive {
  padding-left: 14px;
  margin: 2px 0;
}

/* Gold bullet before each additive name */
.rc-additive-label span::before {
  content: "• ";
  color: #d4af37;
  font-weight: bold;
}

/* Keep label/value aligned on one line */
.rc-additive {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
}

/* Label column */
.rc-additive-label {
  flex: 1;
  white-space: nowrap;
  display: flex;
  gap: 6px;
  align-items: center;
}

/* Value column */
.rc-additive-value {
  text-align: right;
  white-space: nowrap;
}

/* Hide the remove button visually but keep layout clean */
.rc-additive-label button {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.6;
}
/* END ADDITIVES RECIPE CARD STYLE */

/* Make left-column placeholders match right-column text exactly */
.rc-placeholder {
  color: inherit;
  opacity: 1;
  font-weight: 400;
}

.rc-placeholder .label,
.rc-placeholder .value {
  color: inherit;
  opacity: 1;
}
/*-------LEFT SIDE RECIPE CARD----->
/* Total Batch Weight row — left column */
.ingredient.rc-batch-total {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 2px solid #d4af37;   /* gold divider */
}

.ingredient.rc-batch-total .label {
  font-weight: 500;
  color: #333;
}

.ingredient.rc-batch-total .value {
  font-weight: 500;
  color: #000;
}

.ingredient.rc-total-oils .label,
.ingredient.rc-total-oils .value {
  font-weight: 500;
}

/* Invisible structural spacer above Total Oils */
.rc-totals-separator {
  height: 24px;       /* adjust to taste */
}

/* Fix left-side wrapping by giving label and value proper widths */
.bw-recipe-card-ingredients .ingredient {
  display: flex;
  align-items: center;
}

/* Give the label more room */
.bw-recipe-card-ingredients .ingredient .label {
  flex: 0 0 55%;
  white-space: nowrap;
}

/* Give the value less room and prevent wrapping */
.bw-recipe-card-ingredients .ingredient .value {
  flex: 0 0 45%;
  text-align: right;
  white-space: nowrap;
}
/* Lock the value column width so it never drifts too far right */
.bw-recipe-card-ingredients .ingredient {
  display: flex;
  align-items: center;
}

/* Label takes the remaining space */
.bw-recipe-card-ingredients .ingredient .label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* optional, but keeps it clean */
}

/* Value stays aligned and never overflows into the right column */
.bw-recipe-card-ingredients .ingredient .value {
  flex: 0 0 30px;   /* adjust this number to taste */
  text-align: right;
  white-space: nowrap;
}
/* Left column row layout */
.bw-recipe-card-ingredients .ingredient {
  display: flex;
  align-items: center;
}

/* Label: allow it to grow, but NOT infinitely */
.bw-recipe-card-ingredients .ingredient .label {
  flex: 1 1 auto;
  max-width: 200px;   /* THIS is the missing piece */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Value: fixed width that will now actually apply */
.bw-recipe-card-ingredients .ingredient .value {
  flex: 0 0 80px;     /* now this will visibly change */
  text-align: right;
  white-space: nowrap;
}
/* Gold frame around the entire left column */
.bw-recipe-card-ingredients {
  border: 1px solid var(--bw-gold);
  border-radius: 6px;
  padding: 16px;
  background: var(--bw-cream);
}
/* Boutique cream box around the fragrance line */
.ingredient.rc-fragrance {
  background: #faf7f2;              /* warm cream */
  padding: 12px 14px;               /* same interior spacing as EO Blend */
  border-radius: 6px;               /* soft rounded corners */
  border-left: 3px solid #d4af37;   /* gold accent bar */
  margin: 14px -4;                   /* breathing room above/below */
  border-bottom: none; 
  font-size: 1.5rem;
  font-weight:500;             /* remove any leftover lines */
}
/* ================================
   TITLE BARS — Cream + Gold Line
   ================================ */

.bw-recipe-console-section-title {
  background: #faf7f2; /* your cream */
  border-bottom: 1px solid #d4b98c; /* your gold */
  padding: 8px 6px;
  font-weight: 600;
  color: #3a3a3a; /* charcoal */
  font-size: 1rem;
  letter-spacing: 0.3px;
  text-transform: none;
  border-radius: 0; /* remove cartoon rounding */
}


/* ================================
   INPUTS — Slimline, Cream, Gold
   ================================ */

.bw-recipe-console input[type="number"],
.bw-recipe-console input[type="text"],
.bw-recipe-console select {
  background: #faf7f2; /* cream */
  border: 1px solid #d4b98c; /* gold */
  border-radius: 3px;
  padding: 4px 6px;
  height: 28px; /* slim */
  font-size: 0.9rem;
  color: #3a3a3a;
  box-shadow: none;
}

.bw-recipe-console input:focus,
.bw-recipe-console select:focus {
  outline: none;
  border-color: #c7a16a; /* slightly deeper gold */
}


/* ================================
   LABELS — Cohesive Typography
   ================================ */

.bw-recipe-console label {
  font-size: 0.9rem;
  color: #3a3a3a;
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
}


/* ================================
   SPACING + RHYTHM
   ================================ */

.bw-recipe-console .console-row {
  margin-bottom: 14px; /* consistent vertical rhythm */
}

.bw-recipe-console .console-group {
  margin-bottom: 22px; /* spacing between sections */
}


/* ================================
   BUTTONS (if any)
   ================================ */

.bw-recipe-console button {
  background: #faf7f2;
  border: 1px solid #d4b98c;
  color: #3a3a3a;
  padding: 4px 10px;
  border-radius: 3px;
  font-size: 0.9rem;
}

.bw-recipe-console button:hover {
  background: #f3eee7;
}


.bw-input {
  color: #222; /* darker, readable */
}

.bw-input::placeholder {
  color: #7a6f4f; /* warm gold‑taupe, readable */
  opacity: 1;
}
.bw-console .bw-input {
  width: 9ch; /* adjust to taste */
}
/* Uniform boutique input width that cannot be overridden */
.bw-console .bw-input {
  min-width: 9ch; /* adjust to taste */
  width: 100%;     /* fill the field wrapper */
}
/* Bigger, readable, boutique input text */
.bw-console .bw-input {
  font-size: .8rem !important;   /* bigger text = bigger ch units */
  line-height: 1;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Now the width will actually grow */
.bw-console .bw-input {
  min-width: 9ch !important;     /* grows because ch is now larger */
  width: auto !important;
}

/* Inputs: boutique width, consistent with your mobile styling */
.bw-console-field input,
.bw-console-field select {
  width: 9ch;              /* or 20ch or 22ch depending on your vibe */
  min-width: 9ch;          /* ensures consistency */
  max-width: none;          /* THIS is the fix */
  height: 40px;
  padding: 0.3rem 0.5rem;
  font-size: .8rem;
  font-weight: 400;
  text-align: center;
  box-sizing: border-box;
}

.bw-console-group--left,
.bw-console-group--right {
  font-size: 1rem !important;   /* or whatever size you want */
}
/* MOLD HELPER: lock in symmetric, boutique console layout */

/* 1. Two-column console layout */
.bw-console-fields {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem; /* space between left and right columns */
}

/* 2. Left and right columns: identical typography + behavior */
.bw-console-group--left,
.bw-console-group--right {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: .8rem;        /* SAME on both sides */
  line-height: 1;
}

/* 3. Each field: shrink to its content, no stretching */
.bw-console-field {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
}

/* 4. Inputs + selects: identical width + font on both sides */
.bw-console-field input.bw-input,
.bw-console-field select.bw-input {
  width: 9ch;
  min-width: 9ch;
  max-width: 9ch;
  height: 30px;
  padding: 0.3rem 0.5rem;
  font-size: .8rem;        /* SAME as column font-size */
  font-weight: 500;
  text-align: center;
  box-sizing: border-box;
}
/* Normalize number inputs so they match select widths */
.bw-console-field input[type="number"] {
  -moz-appearance: textfield;
}

.bw-console-field input[type="number"]::-webkit-inner-spin-button,
.bw-console-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.bw-console-field input[type="number"] {
  min-width: 0 !important;
  width: 9ch !important;
  max-width: 9ch !important;
}
/* Force Oils input to match boutique width */
.bw-input[data-bw-pref-oil-weight] {
  width: 9ch !important;
  min-width: 9ch !important;
  max-width: 9ch !important;
  box-sizing: border-box !important;
}
/* Make left + right groups sit inline horizontally */
.bw-console-fields {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem; /* adjust spacing between columns */
}

/* Ensure each column shrinks to its content */
.bw-console-group {
  flex: 0 0 auto;
  width: auto;
}

/*****************************************************/
/*----FEBRUARY 14  CONSOLE TITLE BAR ------------------------------
/*****************************************************/

.bw-console-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* title centered via flex trick below */
  background: linear-gradient(135deg, #f4e9d3, rgba(169, 162, 149, 0.59));
  border: 1px solid rgb(111, 108, 102);
  border-radius: 6px;
  padding: 0.1rem 0.1 rem;
  margin-bottom: 0.65rem;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.55),
    0 2px 4px rgba(0,0,0,0.10);
  position: relative;
  cursor: pointer;
  height: 4rem !important; /* reduce height to better match console bar */
}

/* Center the title perfectly */
.bw-console-title {
  flex: 1;
  display: flex;
  justify-content: center;
  pointer-events: none; /* keeps click target clean */
}

.bw-console-title {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #1a1a1a;
  letter-spacing: 0.4px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

/* Icon inside title */
.bw-console-title .bw-icon {
  width: 1.2rem;
  height: 1.2rem;
  fill: rgb(255, 255, 255);
}

/* Chevron — matches Signature exactly */
.bw-console-titlebar::after {
  content: "⌄";
  font-size: 1.5rem;
  color: rgba(1, 1, 1, 0.96);
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
  transform: rotate(0deg); /* closed arrow points DOWN */
  margin-left: 1rem;
}

/* Chevron rotates UP when open */
.bw-setup-console:not(.is-collapsed) .bw-console-titlebar::after {
  transform: rotate(-180deg);
}
/*-------END CONSOLE TITLE BAR ----------------------*/

/*****************************************************
***** SIGNATURE RECIPE BUILDER TOGGLE ----------------
******************************************************/
/* Chevron default — panel starts CLOSED */
.bw-titlebar--signature::after {
  content: "⌄";
  font-size: 1.5rem;
  margin-left: 1rem;
  color: rgba(1, 1, 1, 0.96);
  transition: transform 0.3s ease, color 0.3s ease;
  display: inline-block;
  transform: rotate(-180deg); /* closed arrow points DOWN */
}

/* ============================================
   RESTORE SIGNATURE BAR TO MATCH CONSOLE BAR
   ============================================ */
.bw-titlebar--signature {
  display: flex;
  align-items: center;          /* vertical centering */
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;                   /* console outer wrapper has no padding */
  box-sizing: border-box;
}

/* Inner title behaves like .bw-console-title > h3 */
.bw-titlebar--signature .bw-titlebar__title {
  display: flex;
  align-items: center;          /* centers text vertically */
  margin: 0;
  padding: .25rem .25rem;        /* this creates the bar height */
  width: 100%;
  box-sizing: border-box;
}
/* CORRECTS NON CENTERED TTTLE match console spacing */
.bw-titlebar--signature .bw-titlebar__title {
  padding-left: 0rem; /* adjust to match console exactly */
}
/* Chevron when OPEN */
.bw-titlebar--signature:not(.is-collapsed) .bw-titlebar__right::after {
  transform: rotate(0deg); /* arrow flips UP when open */
}

.bw-titlebar--signature.is-collapsed + .bw-sr-content {
  display: none !important;
}
/* Match console + signature title bar height */
.bw-console-titlebar,
.bw-titlebar--signature {
  height: 2rem !important;
  display: flex;
  align-items: center;
}

/* Make the inner signature title fill the bar like the console title */
.bw-titlebar--signature .bw-titlebar__title {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.75rem;
  box-sizing: border-box;
}
/*.bw-sr-open-message {
  font-size: 0.95rem;
  line-height: 1.2;
  color:rgb(15, 14, 14);              /* your warm neutral 
  background: #f7f3ee;         /* your cream tone 
  border-left: 3px solid #d7c4b0; /* subtle gold-tan accent 
  padding: .5rem .1rem;
  margin: .1rem 0 .3rem 0;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  font-size: 1rem;
  font-weight: 360;
}*/

.bw-titlebar--signature {       /* matches console height */
  padding-top: 0.25rem;     /* vertical breathing room */
  padding-bottom: 0.25rem;
}
.bw-water-group-label {
  font-size: 0.60rem; /* or whatever size you're using for the first line */
  line-height: 1rem;
}

.bw-water-group-subtext {
  font-size: inherit;
  margin: 0;
  padding: 0;
}
.bw-titlebar--signature {
  width: calc(100% + 2rem); /* extend beyond container by 1rem each side */
  margin-left: 0rem;
  margin-right: -3rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #f4e9d3, rgba(169, 162, 149, 0.59));
  border: 1px solid rgb(111, 108, 102);
  border-radius: 6px;
  padding: 0.2rem 0.2rem;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.55), 0 2px 4px rgba(0,0,0,0.10);
  cursor: pointer;
  height: 2rem; /* reduce height to better match console bar */
}

/* Match font size title element */
.bw-titlebar--signature .bw-titlebar__title {
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.4px;
  margin: 0;
  display: flex;
  align: center;
  gap: 0.3rem;
}
/* Chevron rotates UP when signature bar is OPEN */
.bw-titlebar--signature:not(.is-collapsed)::after {
  transform: rotate(0deg) !important;
}
/********************************************************/
/* -------SIGNATURE RECIPE BUILDER UI ------------------*/
/********************************************************/

/* Top row: Blend | Liquid | Fragrance | EO Blend % */
/* Signature Recipe Top Row — DESKTOP: 4-column grid */
.bw-sr-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  margin-bottom: 0.75rem;
}

/* Make selects/inputs fill their cells */
.bw-sr-top select,
.bw-sr-top input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}


/* Force all inputs/selects in the top row to be identical width */
.bw-sr-top select,
.bw-sr-top input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.bw-sr-top select {
  height: auto !important;
  min-height: 40px !important;
  line-height: 1.4 !important;
  padding: 0.5rem 0.75rem !important;
  box-sizing: border-box !important;
}
/* EO row: 4 EO selects + 4 percent boxes on one row */
.bw-sr-eo-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  align-items: center;
}

/* EO select should fill its half of the pair */
.bw-sr-eo-row .bw-sr-eo-select select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Percent box: small, tight, no ballooning */
.bw-sr-eo-row .bw-sr-eo-percent input {
  width: 3.5rem;
  padding: 0.35rem 0.4rem;
  font-size: 0.85rem;
  box-sizing: border-box;
}

/* EO rows container: 4 rows on one line */
.bw-sr-eoblend {
  display: block;
  width: 100%;
}

/* Each EO row becomes a compact mini‑grid */
.bw-sr-eoblend-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 0.35rem;
}

/* EO select: full width of its column, slim height */
.bw-sr-eoblend-row select {
  width: 100%;
  min-width: 0;
  height: 2rem;
  font-size: 0.9rem;
  box-sizing: border-box;
}
/* Add space below the EO blend wrapper, above the oils block */
.bw-sr-eoblend-wrapper {
  padding-bottom: 12px; /* adjust as needed */
}
/* % of blend input: small, tight, consistent */
.bw-sr-eoblend-row input[type="number"] {
  width: 3.2rem;
  height: 2rem;
  padding: 0 0.35rem;
  font-size: 0.8rem;
  box-sizing: border-box;
  text-align: center;
}

/* Actual + Safe: tiny, never stretch the row */
.bw-sr-eoblend-actual,
.bw-sr-eoblend-safe {
  font-size: 0.8rem;
  white-space: nowrap;
}
.bw-sr-linevalue {
  line-height: 1.1;
}

/* eoblend-total + eoblend-totals wrappers */
.bw-sr-eoblend-total,
.bw-sr-eoblend-totals {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Linefield wrapper */
.bw-sr-linefield {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
}

/* Label text */
.bw-sr-linefield label {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #444;
  margin-bottom: 0.1rem;
}

/* Underline BETWEEN label and value */
.bw-sr-underline {
  width: 100%;
  height: 1px;
  background: #ccc;
  margin: 0.15rem 0;
  transition: background-color 0.25s ease, height 0.25s ease;
}

/* Gold on interactivity */
.bw-sr-linefield.active .bw-sr-underline {
  background: #c9a86a;
  height: 2px;
}

.bw-sr-linefield.active .bw-sr-linevalue {
  color: #c9a86a;
}

/* Hidden input ONLY under the value row */
.bw-sr-hidden-input {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4rem;
  height: 1.6rem;
  opacity: 0;
  cursor: text;
  z-index: 2;
}
.bw-sr-hidden-input {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4rem;
  height: 1.6rem;
  opacity: 0;
  cursor: text;
  z-index: 2;
}
.bw-sr-hidden-input {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4rem;
  height: 1.6rem;
  opacity: 0;
  cursor: text;
  z-index: 2;
}
.bw-sr-linevalue.editable::after {
  content: "✎";
  font-size: 0.8rem;
  color: #aaa;
  margin-left: 0.35rem;
}
.bw-sr-linevalue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 0.95rem;
}
.bw-sr-eoblend {
  display: block;
  width: 100%;
}
/* FORCE linevalue to stay on one line */
.bw-sr-linevalue {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  white-space: nowrap !important;
}
.bw-sr-linefield {
  position: relative;
}

.bw-sr-hidden-input {
  position: absolute;
  right: 0;
  top: 0.1rem;     /* aligns with the value baseline */
  width: 3.5rem;
  height: 1.2rem;
  opacity: 0;
  cursor: text;
  z-index: 3;
}
/* Remove any old hidden-input hacks */
.bw-sr-hidden-input {
  display: none;
}

/* Wrap for value input + % sign */
.bw-sr-linevalue-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
}

/* The actual editable input that looks like text */
.bw-sr-linevalue-input {
  width: 3rem;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: right;
  -moz-appearance: textfield;
}

.bw-sr-linevalue-input::-webkit-outer-spin-button,
.bw-sr-linevalue-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Remove the old hidden input entirely */
.bw-sr-hidden-input {
  display: none;
}

/* Selector wrapper */
.bw-sr-select-wrap {
  display: inline-flex;
  align-items: center;
  position: relative;
}

/* Style the select like text */
.bw-sr-select-wrap select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0;
  margin: 0;
  text-align: right;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

/* ▼ caret */
.bw-sr-select-wrap::after {
  content: "▼";
  font-size: 0.7em;
  margin-left: 0.3rem;
  pointer-events: none;
  opacity: 0.7;
}

/* Underline */
.bw-sr-underline {
  width: 100%;
  height: 1px;
  background: var(--bw-gold, #d4af37);
  margin-top: 0.25rem;
}
/* Linefield container */
.bw-sr-linefield {
  position: relative;
  width: max-content;
  display: inline-block;
}

/* The visible word */
.bw-sr-linevalue {
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding-bottom: 0.15rem;
}

/* Underline */
.bw-sr-underline {
  width: 100%;
  height: 1px;
  background: var(--bw-gold, #d4af37);
}

/* Invisible select sitting on top of the word */
.bw-sr-overlay-select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
/* ------------------------------------------------------ */
/* EO BLEND MODULE — CLEAN, FINAL, MAKER’S BLEND UNDERLINE */
/* ------------------------------------------------------ */
.bw-sr-eoblend-row-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
}

/* 3‑row grid: selector | percent  • underline • safe row */
.bw-sr-eoblend-row {
  display: grid;
  grid-template-columns: 1fr 80px;   /* selector | percent */
  grid-template-rows: auto auto auto; /* top • underline • bottom */
  column-gap: 12px;
  row-gap: 4px;                      /* matches Maker’s Blend rhythm */
  width: 100%;
  height: auto;
  align-items: center;
}

/* ------------------------- */
/* ROW 1 — selector + percent */
/* ------------------------- */

.bw-sr-eoblend-row select,
.bw-sr-eoblend-row input[data-bw-sr-eoblend-percent] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  line-height: 1.2;
  font-size: inherit;
  color: inherit;
  min-width: 0;
}

/* Selector: left */
.bw-sr-eoblend-row select {
  grid-column: 1 / 2;
  grid-row: 1;
  width: 100%;
}

/* Percent: right */
.bw-sr-eoblend-row input[data-bw-sr-eoblend-percent] {
  grid-column: 2 / 3;
  grid-row: 1;
  width: 80px;
  justify-self: end;
}

/* ROW 2 — long underline between top and bottom */
.bw-sr-eoblend-underline {
  grid-column: 1 / 3;
  grid-row: 2;
  border-bottom: 1px solid var(--bw-gold, #d4af37);
  padding-top: 0.15rem;
  padding-bottom: 0.25rem;
  line-height: 1;
}
/* ---------------------------------------- */
/* ROW 3 — safe heart + safe %              */
/* ---------------------------------------- */

.bw-sr-eoblend-safe {
  grid-column: 1 / 3;
  grid-row: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 0.1rem;
}

/* Heart sizing */
.bw-sr-eoblend-safe .safe-heart {
  width: 14px;
  height: 14px;
  fill: rgba(212, 175, 55, 0.35) !important;
  stroke: #d4af37 !important;
  stroke-width: 1.6;
  opacity: 0;
  transform: scale(1);
  transition: opacity 0.25s ease-out;
}

.bw-sr-eoblend-safe .safe-heart.is-safe {
  opacity: 1;
  animation: heartPulse 0.9s ease-out 0s 3;
}

@keyframes heartPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.safe-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.safe-label {
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.safe-percent {
  display: flex;
  align-items: center;
  text-align: right;
}

/* EXCEEDS styling */
.bw-sr-eoblend-safe .exceeds {
  color: var(--bw-error, #b30000);
  font-weight: 600;
  text-align: center;
  width: 100%;
}

/* EXCEEDS styling */
.exceeds {
  color: var(--bw-error, #b30000);
  font-weight: 600;
  text-align: center;
  width: 100%;
}
.bw-sr-eoblend-safe {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

.bw-sr-eoblend-safe .bw-sr-eoblend-actual {
  display: inline-flex !important;
  align-items: baseline;
}

.bw-sr-eoblend-safe .exceeds {
  display: inline-flex !important;
  margin-left: 6px !important;      /* horizontal spacing from the % */
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  color: #b30000 !important;
  line-height: 1 !important;
  align-self: baseline !important;  /* vertical alignment with the number */
}
/* Make the row flex so we can reorder children */
.bw-sr-eoblend-safe {
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

/* Keep label where it is */
.bw-sr-eoblend-safe .safe-label {
  order: 1;
}

/* Actual value next */
.bw-sr-eoblend-safe .bw-sr-eoblend-actual {
  order: 2;
}

/* Percent moved to the right of actual */
.bw-sr-eoblend-safe span[data-bw-sr-eoblend-safe]:not(.safe-label) {
  order: 3;
  margin-left: 6px;
}

/* Exceeds after that (if you still want it) */
.bw-sr-eoblend-safe .exceeds {
  order: 4;
  margin-left: 6px;
  font-weight: 400;
  font-size: 0.9rem;
  text-transform: none;
  color: #b30000;
}
.rc-additional-oil {
    white-space: nowrap !important;
    min-width: max-content !important;
}
.bw-sr-eoblend-row {
  align-items: flex-end;
}
.bw-sr-eoblend-underline {
  grid-column: 1 / 3;
  grid-row: 2;
  border-bottom: 1px solid var(--bw-gold, #d4af37);
  padding-top: 0.15rem;
  padding-bottom: 0.25rem;
  line-height: 1;
}
/* Light cream card around each EO row */
.bw-sr-eoblend-row {
  background: #faf7f2;                 /* soft cream, same family as recipe card */
  border: 1px solid rgba(212,175,55,.35); /* soft gold, lighter than recipe card */
  border-radius: 6px;
  padding: 10px 12px;
}
#bw-signature-recipe .bw-card__body {
  font-size: 0.85rem;      /* adjust to taste: 0.8–0.9 is ideal */
  line-height: 1.35;       /* keeps it readable and elegant */

}
#bw-signature-recipe .bw-card__body .bw-sr-top {
  line-height: normal !important;
  align-items: stretch !important;
  min-height: auto !important;
}
/* Make EO rows feel like editorial lines instead of boxes */
.bw-sr-eoblend-row {
  padding: 4px 6px;              /* much tighter */

}

/* Smaller percent picker */
.bw-sr-eoblend-row input[data-bw-sr-eoblend-percent] {
  width: 55px;                    /* was 80px */
  font-size: 0.8rem;              /* smaller text */
  padding: 0;                     /* no internal padding */
  margin: 0;
  text-align: right;
}

/* EO name gets more room automatically because percent is narrower */

/* Underline stays full width and elegant */
.bw-sr-eoblend-underline {
  border-bottom: 4px solid var(--bw-gold, #d4af37);
  padding-top: 0.1rem;
  padding-bottom: 0.15rem;
}

/* Safe row stays clean and tight */
.bw-sr-eoblend-safe {
  margin-top: 0.1rem;
  gap: 4px;
  font-size: 0.75rem;
}
/* Make EO rows feel like editorial lines instead of boxes */
.bw-sr-eoblend-row {
  padding: 4px 6px;              /* much tighter */
}

/* Smaller percent picker */
.bw-sr-eoblend-row input[data-bw-sr-eoblend-percent] {
  width: 55px;                    /* was 80px */
  font-size: 0.8rem;              /* smaller text */
  padding: 0;                     /* no internal padding */
  margin: 0;
  text-align: right;
}

/* EO name gets more room automatically because percent is narrower */

/* Underline stays full width and elegant */
.bw-sr-eoblend-underline {
  border-bottom: 1px solid var(--bw-gold, #d4af37);
  padding-top: 0.1rem;
  padding-bottom: 0.15rem;
}

/* Safe row stays clean and tight */
.bw-sr-eoblend-safe {
  margin-top: 0.1rem;
  gap: 4px;
  font-size: 0.75rem;
}
/* Smaller percent picker */
.bw-sr-eoblend-row input[data-bw-sr-eoblend-percent] {
  width: 45px;           /* smaller than before */
  font-size: 0.75rem;
  padding: 0;
  margin: 0;
  text-align: right;
}
/* Fix mobile: EO select must not collapse */
.bw-sr-eoblend-row select {
  min-width: 0;          /* allow shrinking */
  flex: 1;               /* take available space */
  width: 100%;           /* ensure visibility */
}
/* Ensure the grid respects the select on mobile */
.bw-sr-eoblend-row {
  grid-template-columns: 1fr 55px;   /* narrower percent column */
}
/* Tighten horizontal spacing between the left and right EO Blend groups */
.bw-sr-eoblend-groups {
  column-gap: 8px;   /* was much larger — now tight and editorial */
  gap: 8px;          /* fallback for combined gap */
}
/* Tighten horizontal spacing between inline EO groups */
.bw-sr-eoblend-row-wrapper {
  column-gap: 8px;
  gap: 8px;
}

.bw-sr-linevalue-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.bw-sr-linevalue-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0px;
}
.bw-sr-linevalue-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
/* Wrap for input + % sign */
.bw-sr-linevalue-input-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
}

/* The actual editable input styled like plain text */
.bw-sr-linevalue-input {
  width: 3rem;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: right;
  outline: none;
  -moz-appearance: textfield;
}

.bw-sr-linevalue-input::-webkit-inner-spin-button,
.bw-sr-linevalue-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Linefield container */
.bw-sr-linefield {
  width: 100%;
}

/* Flex row: label left, value right */
.bw-sr-linefield .bw-sr-linevalue {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.bw-sr-eoblend {
  width: 140px; /* or whatever you want */
}

/* FINAL authoritative oil width */
.bw-inline[data-bw-sr-oil-row] {  
  width: 260px !important;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/* ------------------------------------------------------ */
/* OILS — FINAL, CORRECT ARCHITECTURE                     */
/* ------------------------------------------------------ */
/* OIL ROW: inline layout */
.bw-inline[data-bw-sr-oil-row] {
  display: grid;
  grid-template-columns: 1fr 60px; /* name | percent */
  align-items: end; /* sit on the underline */
  column-gap: 0.75rem;
  position: relative;
  padding-bottom: 4px; /* space for underline */
}

/* Remove boxes from both selectors */
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-oil],
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-pct] {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1.2;
}

/* Underline */
.bw-inline[data-bw-sr-oil-row] .bw-sr-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #c9a86a; /* your gold */
}
/* OIL ROW: inline layout */
.bw-inline[data-bw-sr-oil-row] {
  display: grid;
  grid-template-columns: 1fr 60px;
  align-items: end;
  column-gap: 0.75rem;
  position: relative;
  padding-bottom: 4px;

  width: max-content;      /* allows true centering */
  margin: 0 auto;          /* centers the row itself */
}
/* Add space between the EO blend groups and the entire oils block */
.bw-sr-oils {
  padding-top: 20px; /* adjust as needed */
}

/* Remove boxes from both selectors — including on click */
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-oil],
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-pct] {
  appearance: none;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: 1.2;
}

/* Prevent focus ring / blue box on click */
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-oil]:focus,
.bw-inline[data-bw-sr-oil-row] select[data-bw-sr-pct]:focus {
  outline: none;
  box-shadow: none;
}

/* Underline */
.bw-inline[data-bw-sr-oil-row] .bw-sr-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #c9a86a;
}
/* Wrap each oil row in a soft cream box like EO Blend */
.bw-inline[data-bw-sr-oil-row] {
  background: #f8f5ef;        /* your EO Blend cream */
  padding: 10px 12px;         /* inner spacing */
  border-radius: 6px;         /* soft corners */
  width: max-content;         /* keeps layout tight */
  margin: 0 auto 12px auto;   /* centers + spacing between boxes */
  position: relative;         /* keeps underline positioned correctly */
}
.bw-sr-bottom {
  gap: 24px !important;
}

/*---- END OILS ROW -----*/

/*--------------------------------------*
 *  ADDITIVES — CLEAN, STABLE LAYOUT
 *--------------------------------------*/

/* Section wrapper */
.bw-sr-additives {
  width: 530px !important;
  max-width: 100% !important;
  margin: 24px auto 0 auto;
  padding: 20px;
  border: 1px solid #e0d8c8;
  background: #faf8f4;
  border-radius: 8px;

  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px 20px;
  justify-content: center;
}

/* Each additive block */
.bw-sr-additives .bw-sr-row {
  background: #f8f5ef;
  padding: 10px 12px;
  border-radius: 6px;

  display: grid;
  grid-template-columns: 1fr 3ch 7ch !important; /* name | amt | unit */
  align-items: end !important;
  column-gap: 10px !important;
  position: relative !important;
}

/* Underline */
.bw-sr-row .bw-sr-underline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: #c9a86a;
}

/* Selects styled like text */
.bw-sr-additives select {
  border: none;
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0 0 0.1rem 0;
  outline: none;
  appearance: none;
  cursor: pointer;
  border-bottom: 1px solid var(--bw-gold, #d4af37);
}

/* Custom additive input */
.bw-sr-additives input[type="text"] {
  border: none;
  border-bottom: 1px solid var(--bw-gold, #d4af37);
  background: transparent;
  font: inherit;
  color: inherit;
  padding: 0 0 0.1rem 0;
  outline: none;
  width: 100%;
}

/* Compact amount + unit */
[data-bw-sr-additive-amount] { width: 4ch; text-align: right; }
[data-bw-sr-additive-unit]   { width: 6ch; text-align: right; }

/* Restore normal layout so additives grid works again */
.bw-sr-bottom {
  display: block !important;
  width: 100% !important;
  white-space: normal !important;
}


/*------END ADDITIVES -------*/

  .bw-sr-row {
    width: 100% !important;
  }


/* Signature Recipe Top Row — MOBILE: stacked full-width */
@media (max-width: 1023px) {
  .bw-sr-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
    width: 100%;
  }

  .bw-sr-top select,
  .bw-sr-top input {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }
}


.bw-sr-blend select,
.bw-sr-liquid select,
.bw-sr-liquid input[data-bw-sr-liquid-custom],
.bw-sr-foeo select[data-bw-sr-foeo] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
/********************************************/
/*-------END SIGNATURE RECIPE BUILDER------*/
/******************************************/
.bw-recipe-helper {
  grid-column: 1 / -1;
}
.bw-setup-console.is-collapsed .bw-recipe-helper {
  display: none !important;
}

/* BASELINE FOR THE ENTIRE RECIPE BUILDER */
.bw-calc-wrapper,
.bw-calc-wrapper * {
  font-family: "Source Sans Pro", sans-serif;
  line-height: 1.2;
}

/* BODY TEXT */
.bw-calc-wrapper {
  font-size: 14px;
  color: #1a1a1a;
}

/* SECTION TITLEBARS (Recipe Card, EO Blend, etc.) */
.bw-console-titlebar h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
  font-family: "Source Sans Pro", sans-serif;
}

/* FIELD LABELS */
.bw-field__label {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 4px;
  font-family: "Source Sans Pro", sans-serif;
}

/* INPUTS */
.bw-field input,
.bw-field select,
.bw-field textarea {
  font-size: 14px;
  line-height: 1.2;
  font-family: "Source Sans Pro", sans-serif;
}

/* RECIPE CARD INTERIOR TEXT */
.bw-recipe-card,
.bw-recipe-card * {
  font-size: 14px;
  line-height: 1.2;
  font-family: "Source Sans Pro", sans-serif;
}

/* SMALL META TEXT (if any) */
.bw-meta,
.bw-meta * {
  font-size: 12px;
  line-height: 1.2;
  font-family: "Source Sans Pro", sans-serif;
}
/* ============================================
   RECIPE CARD WRAPPER — Soft Border + Depth
   ============================================ */

.bw-recipe-card-wrapper {
  background: #ffffff;
  border: 1px solid #e5dfd6;          /* soft linen-gold border */
  border-radius: 8px;
  padding: 1rem;

  /* subtle depth */
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.08);

  /* ensure it stays aligned with console width */
  width: 100% !important;
  max-width: var(--bw-console-max-width, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ============================================
   CONSOLE WRAPPER — Soft Border + Depth
   ============================================ */

.bw-console-wrapper {
  background: #ffffff;
  border: 1px solid #e5dfd6;          /* soft linen-gold border */
  border-radius: 8px;
  padding: 1rem;

  /* subtle depth */
  box-shadow:
    0 1px 3px rgba(0,0,0,0.06),
    0 4px 12px rgba(0,0,0,0.08);

  width: 100% !important;
  max-width: var(--bw-console-max-width, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* ============================================
   RECIPE HELPER HEADER — Left Inset
   ============================================ */

.bw-recipe-helper {
  align-items: left !important;
  padding-left: 0.75rem;   /* gentle inset */
  padding-right: 0.75rem;  /* optional, keeps symmetry */
  font-size: 1.2rem;
}

/* LEFT AND RIGHT SIDEBAR SCROLL INDENTPENTLY */

/*.bw-layout-desktop {
  display: flex;
  flex-direction: row;
  height: 100vh;        
  overflow: hidden;     
}
.bw-layout-left,
.bw-layout-main,
.bw-layout-right {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
}
.bw-layout-left {
  flex: 0 0 260px;   
}

.bw-layout-right {
  flex: 0 0 260px;   
}

.bw-layout-main {
  flex: 1 1 auto;    
}*/
/* END SIDEBAR INDIVIDUAL SCROLL */

/* Prevent value column from collapsing when empty */
#rc-maker-blend-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#rc-maker-blend-value {
  min-width: 4rem; /* matches Lye/Water spacing */
  text-align: right;
}
.bw-sr-oils {
  grid-column: 1 / -1;
  padding-bottom: 24px;
}
/* --- HARD RESET: Soap recipe bottom layout --- */

/* Parent: simple block container */
.bw-sr-bottom {
  display: block !important;
  gap: 0 !important; /* kill the tiny gap that fights margins */
}

/* Additives wrapper: same width as oils, centered */
.bw-sr-additives {
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Additive rows: no forced full-width stretch */
.bw-sr-additives .bw-sr-row {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Restore oils to full, normal width */
.bw-sr-oils {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 20px 0 !important; /* spacing below oils */
}

/* Restore oil row width so they don't shrink */
.bw-inline[data-bw-sr-oil-row] {
  width: 100% !important;
  max-width: 100% !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.5rem !important;
}
/* Match additives width to oils */
.bw-sr-additives {
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Prevent additive rows from stretching wider than the wrapper */
.bw-sr-additives .bw-sr-row {
  width: auto !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Even vertical spacing above and below the 3‑oil horizontal row */
.bw-sr-oils {
  margin-top: .1rem !important;
  margin-bottom: .5rem !important;
}


.bw-console-group--helper .bw-helper-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bw-console-group--helper {
  max-width: 120px; /* keeps it small */
}
.bw-helper-toggle {
  background: none;
  border: none;
  padding: 0;
  letter-spacing: 0.3px;
  opacity: 0.8;
  cursor: pointer;
  text-align: left;
}

.bw-helper-toggle:hover {
  opacity: 1;
}

.bw-mold-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
  max-width: 60px;
}

.bw-input--mini {
  padding: 3px 4px !important;
  font-size: 10px !important;
}
.bw-mold-stack[hidden] {
  display: none !important;
}
/* Force mold helper to show when not hidden */
.bw-mold-stack {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
}

/* Force mold helper to hide ONLY when [hidden] is present */
.bw-mold-stack[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.bw-step-label {
  font-size: .70rem;
  font-weight: 400;
  color:rgb(39, 38, 37); 
  margin-bottom: 4px;
  padding-bottom: 2px;
}
.bw-helper-toggle {
  display: block;
  margin: 0 auto;
  text-align: center;
}
.bw-step-label {
  margin-bottom: 1px;
}
.bw-helper-toggle {
  display: block;
  margin: 0 auto 15px auto;   /* centers + adds space below */
  text-align: center;
}

.bw-input {
  line-height: 1.1 !important;
}
.bw-step-wrap {
  align-items: flex-start !important;
}
.bw-step-wrap {
  grid-row-gap: 0 !important;
}
@media (min-width: 1200px) {

  /* Match oil input width to the other steps */
  .bw-console-group.bw-console-group--left 
  .bw-console-field[data-field="oil-weight"] 
  .bw-input {
    width: 110px !important;     /* same width as Steps 1–3 */
    max-width: 110px !important;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
  }

}
@media (min-width: 1200px) {

  /* UNIVERSAL: normalize internal layout */
  .bw-step-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto;
  }

  .bw-step-label {
    width: 100%;
    text-align: center;
    margin-bottom: 4px;
  }

  .bw-step-wrap .bw-input {
    width: 100%;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
  }

  /* ---------------------------------------- */
  /* STEP 1–3: identical widths                */
  /* ---------------------------------------- */

  /* Set the container width */
  .bw-console-field[data-field="units"],
  .bw-console-field[data-field="oil-weight"],
  .bw-console-field[data-field="superfat"] {
    width: 125px; /* ← adjust this number to your liking */
  }

  /* Set the wrap width */
  .bw-console-field[data-field="units"] .bw-step-wrap,
  .bw-console-field[data-field="oil-weight"] .bw-step-wrap,
  .bw-console-field[data-field="superfat"] .bw-step-wrap {
    width: 130px;
  }

  /* Set the input width — including the oil field override */
  .bw-console-field[data-field="units"] .bw-input,
  .bw-console-field[data-field="oil-weight"] .bw-input,
  .bw-console-field[data-field="superfat"] .bw-input {
    width: 110px !important;
    max-width: 110px !important;
  }
}
@media (min-width: 1200px) {

  .bw-console-group.bw-console-group--left 
  .bw-console-field[data-field="oil-weight"] 
  .bw-input {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }

}
@media (min-width: 1200px) {

  /* Remove hidden left padding/margin on the oil field wrapper */
  .bw-console-field[data-field="oil-weight"] .bw-step-wrap {
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* And ensure the input itself stays centered */
  .bw-console-field[data-field="oil-weight"] .bw-input {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
  }

}
@media (min-width: 1200px) {

  /* ---------------------------------------- */
  /* STEP 4: Water : Lye Ratio                 */
  /* ---------------------------------------- */

  /* Set the container width */
  .bw-console-field[data-field="water"] {
    width: 120px; /* adjust to taste */
    margin: 0 auto;
  }

  /* Set the wrap width */
  .bw-console-field[data-field="water"] .bw-step-wrap {
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Set the input width */
  .bw-console-field[data-field="water"] .bw-input {
    width: 120px !important;
    max-width: 120px !important;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
  }
} 
@media (min-width: 1200px) {

  /* STEP 5: Lye Type — fix the WRAP width */

  /* Center the Step 5 label */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) .bw-step-label {
    min-width: 110 !important;
    max-width: 110 !important;
    text-align: center;
  }

  /* Make the radio field match the wrap */
  .bw-console-field[data-field="lye-type"] {
    width: 100%;
    margin: 0 auto;
  }

  /* Center each radio row */
  .bw-console-field[data-field="lye-type"] .bw-lye-row {
    width: 100%;
    text-align: center;
    display: block;
  }
}
@media (min-width: 1200px) {

  /* STEP 5: override the theme's global label rule */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) .bw-step-label {
    width: 120px !important;        /* match your Step 5 width */
    max-width: 120px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
    margin: 0 auto !important;
    box-sizing: border-box;
  }

}

@media (min-width: 1200px) {

  /* STEP 5: Force the parent to center ALL children */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;     /* ← THIS is the key */
    justify-content: flex-start !important;
    width: 110px !important;
    margin: 0 auto !important;
    text-align: center !important;      /* ← catches grid/text-align issues */
  }

  /* STEP 5: Force the label to obey centering */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) .bw-step-label {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
  }
}
@media (min-width: 1200px) {

  /* STEP 5: Resize the hidden KOH% wrapper */
  .bw-console-field[data-field="koh-percent"] {
    width: 110px !important;        /* match Step 5 width */
    max-width: 110px !important;
    min-width: 0 !important;        /* ← THIS breaks the 800px expansion */
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
  }

  /* STEP 5: Resize the KOH% input */
  .bw-console-field[data-field="koh-percent"] .bw-input {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;        /* ← prevents inherited giant width */
    font-size: 0.8rem !important;
    padding: 4px 6px !important;
    text-align: center !important;
    box-sizing: border-box;
  }
}
@media (min-width: 1200px) {

  /* STEP 5: tame the KOH% input visuals */
  #kohPercent {
    width: 110px !important;          /* match your other inputs */
    max-width: 110px !important;
    min-width: 0 !important;
    padding: 4px 6px !important;      /* kill the huge padding */
    line-height: 1.2 !important;      /* normal line height */
    height: auto !important;          /* let content define height */
    font-size: 0.8rem !important;     /* smaller, calmer text */
    font-weight: 400 !important;      /* no bold */
    box-sizing: border-box !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  .bw-console-field[data-field="koh-percent"] {
    width: 40%px !important;
    max-width: 40px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1200px) {

  /* Center Step 5 inside its parent row */
  .bw-console-group.bw-console-group--right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* ← THIS is the key */
    justify-content: flex-start !important;
  }

}
@media (min-width: 1200px) {

  /* Center the entire Step 5 group inside the row */
  .bw-console-group.bw-console-group--right {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* ← THIS is the key */
    justify-content: flex-start !important;
    margin: 0 auto !important;        /* ← centers the whole column */
  }

}
/*----------------------------------------------*/
/* FEBRUARY 14--MOBILE/TABLET LAYOUT -----------*/
/*----------------------------------------------*/
@media (max-width: 1023px) {

  /* Console header */
  .bw-console__header {
    padding: .2rem;
    text-align: left;
  }

  .bw-console__header p {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0;
    padding-left: .25rem;
    padding-right: .25rem;
    align: left;
  
  }

  /* Step labels */
  .bw-step-label {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 6px;
  }

  /* Console group right */
  .bw-console-group--right {
    margin-top: -68px; /* adjust to taste */
  }

  /* Action stack */
  .bw-action-stack--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    width: 100%;
  }

  .bw-action-stack--mobile a.bw-mobile-jump,
  .bw-action-stack--mobile button.bw-save-prefs {
    padding: 0.3rem 0.6rem;
    line-height: 1;
    margin: 0;
    width: 70px;
    display: inline-block;
    background: rgba(154, 128, 81, 0.29);
    color: #1f1b17;
    border-radius: 0;
    font-size: 0.5rem;
    font-weight: 500;
    text-decoration: none;
  }

  .bw-action-stack--desktop {
    display: none;
  }

  .bw-console-group--right .bw-action-stack {
    display: none !important;
  }

  /* Mold stack */
  .bw-mold-stack-text p {
    font-size: 1rem !important;
    text-align: left !important;
    margin-bottom: 0.1rem;
  }

  .bw-mold-stack .bw-console-field {
    width: 33.333% !important;
  }
}
@media(max-width: 1023px) {
 .bw-sr-layout {
    margin-top: 12px !important;
  }
}
@media (max-width: 1023px) {
  #bw-signature-recipe .bw-sr-eoblend {
    text-align: center !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
}
@media (max-width: 1023px) {
  #bw-signature-recipe .bw-sr-eoblend {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }
}
@media (max-width: 1023px) {
  #bw-signature-recipe .bw-sr-eoblend,
  #bw-signature-recipe .rc-eoblend-row {
    border: 1px solid #d4af37 !important;
    border-radius: 6px !important;
    padding: 8px !important;
    margin-bottom: 8px !important;
  }
}
@media (max-width: 1023px) {

  /* Additives section: two-column grid with padding */
  .bw-sr-additives {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .bw-sr-additives .bw-sr-row {
    width: 100%;
  }

  /* Bottom section: two-column grid layout */
  #bw-signature-recipe .bw-sr-bottom {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: stretch !important;
  }
}
/* MOBILE — keep the clean stacked layout */
@media (max-width: 1023px) {
  .bw-sr-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
} 
/* MOBILE — keep the clean stacked layout you already like */
@media (max-width: 1023px) {
  .bw-sr-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
}
@media (max-width: 1023px) {

  /* Signature titlebar: center title, float chevron right */
  .bw-titlebar--signature {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1rem;
    height: 4rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .bw-titlebar--signature .bw-titlebar__title {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 1.5rem;
  }


  /* EO blend layout: two groups per row */
  .bw-sr-eoblend-row-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    row-gap: 6px;
  }

  /* Top row: two items per row */
  .bw-sr-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 8px;
    row-gap: 6px;
  }

  /* EO blend totals: inline, compact */
  .bw-sr-eoblend {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 6px;
    align-items: center;
    margin-top: 4px;
    width: 100%;
    grid-column: 1 / -1;
  }

  /* EO total linevalue layout */
  .bw-sr-eoblend-total .bw-sr-linevalue {
    display: flex;
    align-items: center;
    gap: 6px;
    text-align: left !important;
  }

  /* Linevalue input wrapper */
  .bw-sr-linevalue-input-wrap {
    display: flex !important;
    align-items: center;
    gap: 4px;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 6px;
  }

  .bw-sr-linevalue-input {
    width: 60px !important;
    max-width: 60px !important;
    min-width: 0 !important;
    text-align: right;
    padding: 0 4px;
    box-sizing: border-box;
  }
}
@media (max-width: 1023px) {

  /* Boutique input height for left-side console fields */
  .bw-console-group--left .bw-input {
    height: 1rem !important;
    padding-top: 0.15rem !important;
    padding-bottom: 0.15rem !important;
    line-height: 1 !important;
  }

  /* Mobile console titlebar layout */
  .bw-console-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.75rem;
    height: auto;
    gap: 0.5rem;
    flex-wrap: nowrap;
  }

  .bw-console-title {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 1.2rem !important;
  }
}

@media (max-width: 1023px) {

  /* Stack recipe card columns */
  .bw-recipe-card-columns {
    display: block !important;
    width: 100% !important;
  }

  .bw-recipe-card-columns > * {
    width: 100% !important;
    margin-bottom: 0.75rem !important;
    box-sizing: border-box !important;
  }

  /* Ingredient row layout */
  .bw-recipe-card-columns .ingredient {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0.25rem;
  }

  .bw-recipe-card-columns .ingredient .label {
    flex: 0 1 60%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.25rem;
    white-space: nowrap;
    min-width: 0;
  }

  .bw-recipe-card-columns .ingredient .value {
    flex: 0 1 40%;
    text-align: right;
    white-space: nowrap;
    min-width: 0;
  }

  /* Percent alignment inside label */
  .bw-recipe-card-columns .ingredient .label .rc-percent {
    margin-left: 0;
    padding-left: 0.1rem;
    white-space: nowrap;
    min-width: 0;
    text-align: left;
  }

  /* Stack Signature Recipe layout */
  .bw-sr-layout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .bw-sr-layout > * {
    width: 100%;
  }
}
@media (max-width: 1023px) {

  /* Global containment */
  html,
  body {
    overflow-x: hidden;
  }

  /* Signature Recipe Builder */
  #bw-signature-recipe.bw-card,
  #bw-signature-recipe .bw-sr-oils,
  #bw-signature-recipe .bw-sr-additives,
  #bw-signature-recipe .bw-sr-row-2,
  #bw-signature-recipe .bw-inline,
  #bw-signature-recipe .bw-sr-row-2 > *,
  #bw-signature-recipe .bw-inline > *,
  #bw-signature-recipe select,
  #bw-signature-recipe input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #bw-signature-recipe .bw-sr-row-2,
  #bw-signature-recipe .bw-inline {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Disable desktop grid */
  .bw-layout-desktop {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
    padding: 0 1rem;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .bw-layout-left,
  .bw-layout-right,
  .bw-layout-main {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 2rem;
  }

  /* Collapse sidebars */
  .bw-layout-left,
  .bw-layout-right,
  #shopify-section-bw-sidebar-left,
  #shopify-section-bw-sidebar-right,
  .bw-sidebar {
    display: none !important;
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .bw-layout-main {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Global containment for calculator */
  #shopify-section-bw-calc,
  #shopify-section-bw-calc .bw-console-wrapper,
  #shopify-section-bw-calc .bw-console {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
    overflow-x: visible;
  }

  /* Banner image containment */
  #shopify-section-bw-calc .bw-top-banner-outer,
  #shopify-section-bw-calc .bw-top-banner-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
  }

  .page-width,
  .page-width--narrow,
  .content-for-layout,
  .template-page__content,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-x: visible !important;
  }

  /* Console layout: two stacked columns */
  .bw-console {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .bw-console-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
  }

  .bw-console-group,
  .bw-console-group--left,
  .bw-console-group--right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
  }

  .bw-console-field input,
  .bw-console-field select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Field overrides */
  [data-bw-pref-ratio] {
    grid-column: 2 !important;
  }

  [data-field="oil-weight"] {
    grid-column: 1 !important;
    grid-row: 4 !important;
  }

  /* Recipe card output wrapping */
  .bw-recipe-card-outputs .ingredient .label {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
  }

  .bw-recipe-card-outputs .ingredient .label button {
    flex-shrink: 0;
  }

  .bw-recipe-card-outputs .ingredient {
    min-width: 0;
  }
}

//@media (max-width: 1023px) {

  /* Center and enlarge the step labels */
  .bw-step-label {
    text-align: center;
    font-size: .85rem;
    font-weight: 500;
    margin-bottom: 4px;
  }

  /* Lift the right-side block upward slightly */
  .bw-console-group--right {
    margin-top: -10px;
  }

  /* Style for the jump link */
  .bw-mobile-jump {
    width: 100%;
    text-align: center;
    margin: 14px 0;
  }

  .bw-mobile-jump a {
    padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1.2;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: auto;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }
}
@media (max-width: 1023px) {

  /* Center + enlarge step labels */
  .bw-step-label {
    text-align: center;
    font-size: ,85rem;
    font-weight: 500;
    margin-bottom: 6px;
  }

  /* Lift the right-side block upward */
  .bw-console-group--right {
    margin-top: -14px;
  }

  /* Jump link wrapper */
  .bw-mobile-jump {
    padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1.2;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: auto;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }

  .bw-mobile-jump a {
    padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1.2;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: auto;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }
}
@media (max-width: 1023px) {
  .bw-console-group--right {
    margin-top: -30px; /* adjust to taste */
  }
  /* MOBILE: stacked under inputs on the left */
  .bw-action-stack {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start; /* left */
 }
}
@media (max-width: 1023px) {
  .bw-console-group--right {
    margin-top: -68px; /* adjust to taste */
  }
}
.bw-save-prefs {
   padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1.2;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: auto;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
}
/* MOBILE: show mobile buttons, hide desktop buttons */
@media (max-width: 1023px) {
  .bw-action-stack--desktop { display: none; }
  .bw-action-stack--mobile {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    margin-top: 0.5rem;
  }
}
@media (max-width: 1023px) {

  /* The actual mobile button stack */
  .bw-action-stack--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;        /* tighten spacing between buttons */
    margin-top: 0.25rem; /* pull the block up under the inputs */
  }

  /* The actual mobile buttons */
  .bw-action-stack--mobile a.bw-mobile-jump,
  .bw-action-stack--mobile button.bw-save-prefs {
    padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: 110px;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }
}
@media (max-width: 1023px) {
  .bw-console-group--right .bw-action-stack {
    display: none !important;
  }
}
@media (max-width: 1023px) {

  /* The actual mobile button stack */
  .bw-action-stack--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;        /* tighten spacing between buttons */
    margin-top: 0.25rem; /* pull the block up under the inputs */
  }

  /* The actual mobile buttons */
  .bw-action-stack--mobile a.bw-mobile-jump,
  .bw-action-stack--mobile button.bw-save-prefs {
    padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: 110px;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }
}
@media (max-width: 1023px) {
  .bw-action-stack--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers the buttons */
    gap: 0.25rem;
    margin-top: 0.35rem;
    width: 100%;           /* ensures true centering */
  }

  .bw-action-stack--mobile a.bw-mobile-jump,
  .bw-action-stack--mobile button.bw-save-prefs {
    padding: 0.3rem 0.6rem;  /* slim */     
    line-height: 1;        /* tighter */
    margin: 0;               /* remove default spacing */
    width: 110px;             /* prevents stretching */
    display: inline-block;
    background:rgba(154, 128, 81, 0.29); 
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }
}
@media (max-width: 1023px) {
  .bw-mold-stack-text p {
    font-size: 1rem !important;
    text-align: left !important;
    margin-bottom: 0.1rem;
  }
}
@media (max-width: 1023px) {
  .bw-mold-stack .bw-console-field {
    width: 33.333% !important;
  }
} 

 @media (max-width: 1023px) {
  .bw-console__header {
    padding: .2rem;        /* adjust side + top/bottom padding */
    text-align: left;        /* left-align on mobile */
  }

  .bw-console__header p {
    font-size: 1rem;       /* bump mobile text size */
    line-height: 1.45;       /* adjust readability */
    margin: 0;               /* remove default spacing */
  }
}
@media (max-width: 1023px) {
  .bw-console__header,
  .bw-console__header p {
    text-align: center !important;
    padding-left: .25rem;
    padding-right: .25rem;
  }
}

@media screen and (max-width: 1023px) {
  .container[data-site-container] {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 1023px) {
  .container[data-site-container],
  .page-width {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
}
@media screen and (max-width: 1023px) {
  .calc-wrapper,
  .bw-calc-wrapper,
  #calc-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
}
@media screen and (max-width: 1023px) {
  .layout-desktop {
    display: none !important;
  }
}
@media screen and (max-width: 1023px) {
  .bw-layout-desktop {
    display: block !important;
  }

  .bw-layout-left,
  .bw-layout-right {
    display: none !important;
  }

  .bw-layout-main {
    width: 100% !important;
  }
}
@media screen and (max-width: 1023px) {
  .page-width--grid,
  .page-layout__columns,
  .page-layout,
  .page-layout__container {
    display: block !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media screen and (max-width: 1023px) {
  .bw-layout-desktop {
    display: block !important;
    grid-template-columns: none !important;
  }

  .bw-layout-left,
  .bw-layout-right {
    display: none !important;
  }

  .bw-layout-main {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Center title text with flexbox */
.bw-titlebar--signature.centered {
  justify-content: center;
  position: relative;
 }

 /* Position right icon absolutely when centering title */
.bw-titlebar--signature.centered .bw-titlebar__right {
  position: absolute;
  right: 0.25rem;
 }

 /* Invisible placeholder to balance space when using space-between */
.bw-titlebar--signature .bw-titlebar__left-placeholder {
  width: 2rem; /* match width of right side content */
  visibility: hidden;
 }

 /* Position right icon absolutely so it doesn't affect centering */
.bw-titlebar--signature .bw-titlebar__right {
  position: absolute;
  right: 1rem;
 }
 /* HELPS CORRECT NON CENTETERED TITLE match console spacing */
.bw-titlebar--signature .bw-titlebar__title {
  padding-right: 0rem; /* adjust to match console exactly */
 }
/* Invisible placeholder on left to balance right icon space */
.bw-titlebar--signature .bw-titlebar__left-placeholder {
  width: 4rem; /* adjust to match right icon width */
  visibility: hidden;
 }

.bw-titlebar--signature .bw-titlebar__title {
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  text-align: center;
 }

.bw-titlebar--signature .bw-titlebar__title h3 {
  font-size: 1.2rem; /* adjust to match console exactly */
  margin: 0;
  padding: 0;
 }

/* Center title text with flexbox */
.bw-titlebar--signature.centered {
  justify-content: center;
  position: relative;
 }

/* Position right icon absolutely when centering title */
.bw-titlebar--signature.centered .bw-titlebar {
  position: absolute;
  right: 0.5rem;
 }

/* Invisible placeholder to balance space when using space-between */
.bw-titlebar--signature .bw-titlebar__left-placeholder {
  width: 2rem; /* match width of right side content */
  visibility: hidden;
 }

/* Title text styling */
.bw-titlebar--signature .bw-titlebar__title {
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  text-align: center;
 }

.bw-titlebar--signature .bw-titlebar__title {
  font-size: 1.2rem; /* adjust to match console exactly */
  margin: 0;
  padding: 0;
 }

}
/* MOBILE — stacked layout */
@media (max-width: 1023px) {
  .bw-sr-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
}
@media (max-width: 1023px) {

  /* Bigger labels */
  .bw-sr-top .bw-sr-linevalue,
  .bw-sr-linefield .bw-sr-linevalue {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  /* Bigger selects + inputs */
  .bw-sr-top select,
  .bw-sr-top input,
  .bw-sr-linefield select,
  .bw-sr-linefield input {
    font-size: 1.5rem;
    padding: 0.65rem 0.55rem;
    height: auto;
    font-weight: 550;
    align-items: center;
  }

  /* Bigger bubbles */
  .bw-help-bubble {
    font-size: 1.2rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
  }

  /* Slightly more breathing room between stacked items */
  .bw-sr-top {
    gap: 0.6rem !important;
  }
}
/*****************************************************
--FEBRUARY 14  END MOBILE VIEW ----------------
******************************************************/
/*----------------------------------------------------
/*---TABLET/IPAD VIEW --------------------------------
/*----------------------------------------------------*/
/* Force MOBILE layout on all tablets under 1200px,   */
@media screen and (min-width: 750px) and (max-width: 1199px) {
  .bw-layout-desktop {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bw-layout-left,
  .bw-layout-right {
    display: none !important;
  }

  .bw-layout-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bw-console-fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    width: 100% !important;
    align-items: center;
  }

  .bw-console-group {
    width: 100% !important;
    display: block !important;
  }

  .bw-step-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .bw-step-label {
    width: 100% !important;
    text-align: left !important;
    white-space: normal !important;
  }

  .bw-console-field,
  .bw-console-field .bw-input,
  .bw-console-field select,
  .bw-console-field input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bw-action-stack--mobile {
    display: flex !important;
  }

  .bw-action-stack {
    display: none !important;
  }
}
/*---------------------------------------------------*/
/*--FEBRARY 14---END TABLET/IPAD VIEW----------------*/
/*---------------------------------------------------*/

/*---------------------------------------------------*/
/*--FEBRARY 14---DESKTOP LAYOUT -MIN WIDTH 1200------*/
/*---------------------------------------------------*/
@media (min-width: 1200px) {

  /* Signature Recipe Top Row: 4-column grid layout */
/* DESKTOP — force 4‑column grid */
.bw-sr-top {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0.75rem !important;
  width: 100%;
}

  .bw-sr-top * {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .bw-sr-top input,
  .bw-sr-eoblend-total input {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .bw-sr-top .bw-sr-linefield,
  .bw-sr-eoblend-total {
    font-size: 0.9rem;
    line-height: 1.25;
  }

  .bw-sr-top .bw-sr-linevalue {
    font-size: 1rem;
    line-height: 1.3;
  }

  /* EO Blend Totals: place in top row, right-aligned */
  .bw-sr-eoblend-total {
    grid-row: 1;
    grid-column: 4;
    justify-self: end;
    align-self: center;
  }

  /* Console layout */
  .bw-console-fields {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem !important;
  }

  .bw-console-fields {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
  }

  .bw-console-group {
    display: contents;
    flex: 1 1 auto;
    max-width: 50%;
  }

  .bw-console-field {
    flex: 0 0 auto;
    width: auto;
    min-width: auto !important;
    max-width: none !important;
  }

  .bw-console-field input,
  .bw-console-field select {
    width: 100%;
    max-width: none !important;
    font-size: 0.8rem !important;
  }

  /* EO blend row layout */
  .rc-eoblend-row .rc-col {
    padding: 2px 0;
  }

  .rc-eoblend-row .rc-label {
    width: 65%;
  }

  .rc-eoblend-row .rc-value {
    width: 35%;
    text-align: right;
  }

  /* Prevent oil label wrapping */
  .rc-oil-label,
  .rc-oil-label-text,
  .rc-oil-label span,
  .rc-oil-label button {
    white-space: nowrap;
  }

  /* Ingredient layout */
  .ingredient {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1rem;
    align-items: center;
  }

  .ingredient .label,
  .ingredient .rc-oil-label,
  .ingredient .rc-additive-label,
  .ingredient .rc-liquid-label,
  .ingredient .rc-maker-blend-label {
    white-space: nowrap;
    min-width: 200px;
  }

  .ingredient .value,
  .ingredient .rc-oil-value,
  .ingredient .rc-additive-value,
  .ingredient .rc-liquid-value,
  .ingredient .rc-maker-blend-value {
    white-space: nowrap;
    text-align: right;
  }

  /* Desktop-only action buttons */
  .bw-action-stack--mobile {
    display: none !important;
  }


  .bw-console-group--right .bw-next-steps-label {
    font-size: 0.85rem;
    line-height: 1.1;
    margin-bottom: 0.15rem;
  }

  .bw-console-group--right button.bw-save-prefs {
    padding: 0.3rem 0.6rem;
    line-height: 1;
    margin: 0px;
    width: 110px;
    display: inline-block;
    background: rgba(195, 181, 147, 0.29);
    color: #1f1b17;
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;
  }

  .bw-console-group--right button.bw-save-prefs {
    font-size: 0.85rem;
    padding: 0.35rem 0.65rem;
    line-height: 1.2;
  }

  .bw-console-group--right .bw-action-stack--desktop {
    margin-top: 0.10rem;
    gap: 0.4rem;
  }

  .bw-console-group--right .bw-action-stack {
    margin-top: 0.05rem;
    gap: 0.25rem;
  }

  .bw-console-group--right .bw-action-stack a,
  .bw-console-group--right .bw-action-stack button {
    margin: 0;
  }

  /* Oils row: prevent wrapping */
  #bw-signature-recipe .bw-sr-oils .bw-sr-row-2,
  #bw-signature-recipe .bw-sr-oils .bw-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
  }

  #bw-signature-recipe .bw-sr-oils .bw-sr-row-2 > *,
  #bw-signature-recipe .bw-sr-oils .bw-inline > * {
    flex: 0 0 auto;
  }

  /* Recipe card: allow ingredients column to shrink */
  .bw-recipe-card-columns .bw-recipe-card-ingredients {
    min-width: 0 !important;
  }

  /* Master type + color system */
  :root {
    --lalaland-dark: #1f1b17;
    --lalaland-cream: #faf8f4;
    --lalaland-gold: #d4af37;
    --lalaland-red: rgb(165, 33, 51);
  }

  html {
    font-size: 15px;
    color: var(--lalaland-dark);
  }

  body {
    background-color: var(--lalaland-cream);
    color: var(--lalaland-dark);
    line-height: 1.45;
  }

  h1, .title-xl {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--lalaland-dark);
  }

  h2, .title-lg {
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--lalaland-dark);
  }

  h3, .title-md {
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 500;
    color: var(--lalaland-dark);
  }

  p, .text-body {
    font-size: 1rem;
    line-height: 1.45;
    color: var(--lalaland-dark);
  }

  small, .text-sm {
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--lalaland-dark);
  }

  #bw-recipe-card,
  .bw-recipe-card,
  .bw-recipe-card-columns,
  .bw-recipe-card-ingredients {
    font-size: 1rem !important;
    color: var(--lalaland-dark) !important;
  }

  #bw-recipe-card .ingredient .label,
  #bw-recipe-card .ingredient .value {
    color: var(--lalaland-dark) !important;
    font-size: 0.9rem;
  }

  .gold,
  .accent-gold,
  #bw-recipe-card .section-title {
    color: var(--lalaland-gold);
  }

  #recipe-shell * {
    font-size: 0.8rem !important;
    color: var(--bw-placeholder-color, rgb(165, 33, 51));
  }
}
/* DESKTOP CONSOLE GROUP */

@media (min-width: 1200px) {

  .bw-console-fields {
    display: flex;
    flex-direction: row;
    align-items: flex-start;   /* top aligned */
    flex-wrap: nowrap;         /* one row */
    gap: 1rem;
  }

  /* ⭐ ALL small groups (Steps 1–3 + Lye) SAME WIDTH */
  .bw-console-group {
    width: 200px;              /* compact, consistent */
    flex: 0 0 auto;            /* do NOT stretch */
  }

  /* ⭐ Lye stays compact like the others */
  .bw-lye-radio {
    width: 200px;
  }

  /* ⭐ Water is the ONLY wider one */
  .bw-water-row {
    width: 300px;              /* wider, but not huge */
    flex: 0 0 auto;
  }

  /* Prevent children from forcing stretch */
  .bw-step-wrap,
  .bw-console-field {
    width: 100%;
    max-width: 100%;
  }

  .bw-action-stack {
    margin-left: auto;
  }

  .bw-action-stack--mobile {
    display: none;
  }
}
/*-------------------------------------------------*/
/*---------END DESKTOP LAYOUT ---------------------*/
/*-------------------------------------------------*/

/*-------------------------------------------------*/
/*---------PRINT MEDIA RECIPE CARD-----------------*/
/*-------------------------------------------------*/
/* ============================================================
   PRINT — CLEAN, ISOLATED RECIPE CARD
   ============================================================ */
#bw-print-card {
  display: none;
}
   @media print {

  /* SHOW ONLY THE PRINT CARD */
  #bw-print-card,
  #bw-print-card * {
    display: block !important;
    visibility: visible !important;
  }

  /* ENSURE PRINT CARD IS NOT COLLAPSED */
  #bw-print-card {
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
  }
}
@media print {

  .bw-print-logo img {
    width: 120px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto 20px auto !important; /* centered + a little breathing room */
  }

}

/* ===============================
   PRINT LAYOUT
   =============================== */
@media print {
  @page {
    size: letter portrait;
    margin: 0.25in;
  }
} 
@media print {

  body * {
    visibility: hidden !important;
  }

  #bw-print-card, #bw-print-card * {
    visibility: visible !important;
  }

  #bw-print-card {
  width: 100%;
  padding: 24px;
  font-family: serif;
  color: #000;
  box-sizing: border-box;
}

  /* HEADER ROW */
  .bw-print-header-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
  }

  .bw-print-logo {
    width: 90px;
    height: 90px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }

  .bw-print-titleblock {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bw-print-title {
    font-size: 28px;
    font-weight: bold;
  }

  .bw-print-prefline {
    font-size: 14px;
    display: flex;
    gap: 8px;
    align-items: center;
  }

  .bw-print-prefline .sep {
    opacity: 0.6;
  }

  /* TWO COLUMNS */
  .bw-print-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 32px;
  }

  .bw-print-left,
  .bw-print-right {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.4;
  }

  /* NOTES + NUMBERS */
  .bw-print-bottom {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .bw-print-notes,
  .bw-print-numbers {
    white-space: pre-wrap;
    font-size: 14px;
    line-height: 1.4;
  }
}
.bw-print-logo {
  background-image: url('/cdn/shop/files/IMG_3909.png?v=1766294294');
}
@media print {
  #shopify-section-bw-calc,
  #shopify-section-bw-calc .bw-console-wrapper,
  #shopify-section-bw-calc .bw-console {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }
}

/*-----------------------------------------------*/
/*-------END PRINT MEDIA ------------------------*/
/*-----------------------------------------------*/


#bw-recipe-card .text-red,
#bw-recipe-card .label-red {
  color: var(--lalaland-red) !important;
}
.rc-remove-oil,
[data-bw-rc-remove-oil] {
  color: var(--bw-rc-remove-oil, rgb(165, 33, 51));
  cursor: pointer;
}
.error,
.input-error,
.field-error {
  color: rgb(165, 33, 51); !important;
  border-color: rgb(165, 33, 51); !important;
}

/* Oil Weight placeholder — restore brand red */

.bw-console-group.bw-console-group--left
  .bw-console-field[data-field="oil-weight"]
  .bw-input {
  color: var(--bw-placeholder-color, rgb(165, 33, 51));
}
.bw-sr-linefield.bw-sr-blend .bw-sr-linevalue {
  color: var(--bw-sr-blend, rgb(165, 33, 51))!important;
}
.bw-layout-desktop {
  font-family: "Source Sans Pro", sans-serif !important;
  font-size: 12px;
  line-height: 1.2;
}
.bw-setup-console.is-collapsed .bw-console-group--full {
  visibility: hidden;
  opacity: 0;
}

.bw-setup-console:not(.is-collapsed) .bw-console-group--full {
  visibility: visible;
  opacity: 1;
}
.bw-mold-stack {
  display: grid;
  gap: 0.5rem;
}

.bw-setup-console.is-collapsed .bw-mold-stack {
  display: none !important;
}

.bw-setup-console:not(.is-collapsed) .bw-mold-stack {
  display: block !important;
}
.bw-mold-stack .bw-console-field {
  display: inline-block;
  width: 33.333%;
}
.bw-mold-stack .bw-input--mini {
  font-size: .4rem;
  padding: 0.5rem;
}
.bw-mold-stack {
  text-align: center;
}
.bw-mold-stack-text {
  text-align: center;
  padding: .5rem;
  font-weight: 300;
}
.bw-mold-stack-text {
  margin-bottom: 0.5rem;
}
.bw-mold-stack .bw-console-field {
  margin-top: -2;
}
.bw-mold-stack {
  row-gap: 0.25rem;
}

.bw-console__header p {
  padding: .5rem .5rem;   /* top/bottom, left/right */
  font-size: 1rem;        /* adjust text size */
  line-height: 1.4;       /* adjust spacing between lines */
  text-align: center;      
  margin: 0;             /* remove default paragraph margin */
  font-weight: 400             
 }
.bw-setup-console.is-collapsed .bw-console-group--full {
  margin: 0 !important;
  padding: 0 !important;
}
.bw-setup-console.is-collapsed .bw-helper-toggle,
.bw-setup-console.is-collapsed .bw-mold-stack {
  display: none !important;
}
.bw-recipe-card-panels {
  margin: 0;
  padding: 0;
}
.bw-panel {
  margin: 0 !important;
  padding: 0 !important;
}
.bw-recipe-card-header {
  margin-bottom: 0.35rem;
}

.bw-recipe-card-toggles {
  margin-bottom: 0.35rem;
}
/* PANEL SIZE AND STYLING */

.bw-recipe-card-panels .bw-panel {
  width: auto;
  max-width: fit-content;
  display: inline-block;
}
.bw-recipe-card-panels {
  text-align: center;
}
.bw-panel-content {
  background:rgba(219, 207, 179, 0.29);
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: .5rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.bw-panel {
  margin: 0rem 0;
}
.bw-panel {
  display: none;
}

.bw-panel.open {
  display: inline-block;
}
.bw-panel {
  display: none;
  margin: 0;
  padding: 0;
}

.bw-panel.open {
  display: inline-block;
}
.bw-recipe-card-panels {
  display: inline-block;
  width: auto;
  height: auto;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0; /* removes phantom whitespace */
}
.bw-recipe-card-panels {
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  height: auto !important;
}
.bw-recipe-card-header {
  margin-bottom: 0.15rem !important;
  padding-bottom: 0 !important;
}

.bw-recipe-card-toggles {
  margin-bottom: 0.15rem !important;
  padding-bottom: 0 !important;
}
/* END TOGGLE PANELS */

/*NOTE CARD PANEL */
/* Note Card Container */
.bw-notecard {
  background: #fffdf7;              /* soft cream */
  border: 1px solidrgb(250, 241, 219);        /* warm gold-beige */
  border-radius: 2px;
  padding: 1rem 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 600px;                 /* keeps it tidy */
  margin: 0 auto;                   /* centers under toggles */
}

/* Title */
.bw-notecard-title {
  font-weight: 600;
  color:rgb(8, 8, 8);                   /* warm neutral */
  font-size: 1rem;
}

/* Editable Notes Field */
#bw-recipe-notes {
  width: 100%;
  min-height: 140px;
  border: 1px solid #d8c9a8;
  border-radius: 3px;
  padding: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  resize: vertical;
  background: #fffefb;
  font-family: inherit;
}

/* -------------------------------------------------------
   ⭐ RECIPE NAME INPUT — TITLE BAR STYLE
   ------------------------------------------------------- */

.bw-recipe-name-input {
  display: flex;
  flex-direction: column;
  margin-left: 0.5rem;
  margin-top: -2px; /* aligns with icon */
}

.bw-recipe-name-input label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #5a4610;
  margin-bottom: 0.1rem;
  opacity: 0.7;
}

#bw-recipe-name {
  border: none;
  border-bottom: 2px solid #c9a86a; /* gold underline */
  background: transparent;
  padding: 0.15rem 0;
  font-size: 1,2rem;
  font-weight: 600;
  color:rgb(0, 0, 0);
  width: 180px;

  outline: none;
  box-shadow: none;
}

#bw-recipe-name::placeholder {
  color:rgb(9, 9, 9) !important;
  opacity: 0;
  font-weight: 500;
}

/* Remove browser autofill ugliness */
#bw-recipe-name:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px #fff7e6 inset !important;
  -webkit-text-fill-color:rgb(6, 6, 6) !important;
}
/* -------------------------------------------------------
   ⭐ RECIPE NAME INPUT — HORIZONTAL ALIGNMENT WITH ICON
   ------------------------------------------------------- */

.bw-recipe-card-titlebar {
  display: flex;
  align-items: center; /* aligns icon + input horizontally */
  gap: 0.75rem;
}

/* Make the name input horizontal instead of stacked */
.bw-recipe-name-input {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
}

/* Small, subtle label */
.bw-recipe-name-input label {
  font-size: 1rem;
  font-weight: 600;
  color: #5a4610;
  opacity: 0.7;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

/* Gold underline input */
#bw-recipe-name {
  border: none;
  border-bottom: 2px solid #c9a86a;
  background: transparent;
  padding: 0rem 0;
  font-weight: 400;
  color:rgb(0, 0, 0);
  width: 110px;

  outline: none;
  box-shadow: none;
}

#bw-recipe-name::placeholder {
  color:rgb(0, 0, 0);
  opacity: 0.6;
  font-size: 0.75rem;  
  font-weight: 300;
}

.bw-numbers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  align-items: start;
}
/*=====================================================================
   PREFERENCES SAVED - FLOATING INDICATOR
 ===================================================================== */
 .bw-toast {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background: #222;
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateY(10px);
  z-index: 9999;
}
.bw-toast.show {
  opacity: 1;
  transform: translateY(0);
}  
.bw-console-fields {
  align-items: flex-start; /* top-align all step columns */
}
.bw-water-toggle {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: #1f1b17;
  text-decoration: underline;
  cursor: pointer;
}
.bw-sr-top {
  grid-auto-rows: minmax(64px, auto) !important;
}
.bw-sr-linefield .bw-sr-linevalue {
  padding-top: 6px;
  padding-bottom: 2px;
}
/* Desktop: clean card with header strip */
.bw-sr-step {
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

/* Header strip */
.bw-sr-step .bw-sr-step-header {
  background: var(--bw-accent, #f5f1e8); /* your cream/gold tone */
  padding: 10px 14px;
  font-weight: 600;
}

/* Body */
.bw-sr-step .bw-sr-step-body {
  padding: 12px 14px;
}
@media (max-width: 1023px) {
  .bw-sr-top {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .bw-sr-step {
    border-radius: 10px;
    padding: 0;
  }

  .bw-sr-step .bw-sr-step-header {
    padding: 14px 16px;
    font-size: 1.1rem;
  }

  .bw-sr-step .bw-sr-step-body {
    padding: 16px;
    font-size: 1rem;
  }
}
/* ============================
   START A BATCH — DESKTOP
   ============================ */

.bw-console-fields {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.bw-step-wrap {
  /*border: 1px solid rgba(0,0,0,0.12);*/
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Header strip */
.bw-step-label {
  background: var(--bw-accent, #f5f1e8);
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.95rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Body/value area */
.bw-step-wrap .bw-console-field {
  padding: 12px 14px;
}
/* ============================
   START A BATCH — MOBILE
   ============================ */
@media (max-width: 1023px) {
  .bw-console-fields {
    flex-direction: column;
    gap: 16px;
  }

  .bw-step-wrap {
    border-radius: 10px;
  }

  .bw-step-label {
    padding: 14px 16px;
    font-size: 1.1rem;
  }

  .bw-step-wrap .bw-console-field {
    padding: 16px;
    font-size: 1rem;
  }
}
@media (max-width: 1023px) {

  /* Make the whole stack vertical and full width */
  .bw-console-fields {
    flex-direction: column;
    gap: 12px; /* tiny amount of room between cards */
    width: 100%;
  }

  /* Make each step card full width */
  .bw-step-wrap {
    width: 100%;
    display: block;
  }

  /* Ensure the inner field stretches too */
  .bw-step-wrap .bw-console-field {
    width: 100%;
  }
}
@media (max-width: 1023px) {

  /* HEADER STRIP — big, bold, readable */
  .bw-step-label {
    font-size: 1.5rem;        /* was 1.25 */
    line-height: 2;
    padding: 20px 22px;       /* more breathing room */
    font-weight: 600;
  }

  /* BODY / INPUT TEXT — big enough to tap without squinting */
  .bw-step-wrap .bw-console-field,
  .bw-step-wrap .bw-console-field .bw-input,
  .bw-step-wrap .bw-console-field select.bw-input {
    font-size: 1.5rem;       /* was 1.15 */
    line-height: 2;
  }

  /* INPUTS / SELECTS — full app-sized tap targets */
  .bw-step-wrap .bw-console-field .bw-input {
    font-size: 1.5rem;        /* was 1.25 */
    line-height: 2;
    padding: 20px 22px;       /* more breathing room */
    font-weight: 600;
  }

}
@media (max-width: 1023px) {

  /* Make ALL inputs/selects inside the Start-A-Batch console bigger */
  .bw-console-fields .bw-input,
  .bw-console-fields select.bw-input,
  .bw-console-fields input.bw-input {
    font-size: 2rem !important;
    padding: 18px 20px !important;
    height: auto !important;
  }

  /* Make the radio rows bigger (Superfat, Lye Type, Water Mode) */
  .bw-console-fields .bw-lye-row,
  .bw-console-fields .bw-water-row {
    font-size: 2rem !important;
    line-height: 2.5 !important;
    padding: 14px 0 !important;
  }

  /* Make the radio buttons themselves bigger */
  .bw-console-fields .bw-lye-radio,
  .bw-console-fields .bw-water-radio {
    transform: scale(1.5);
    margin-right: 12px;
  }

  /* Make the water mode selects bigger */
  .bw-console-fields .bw-water-input {
    font-size: 1.5rem !important;
    padding: 16px 18px !important;
  }

  /* Make the entire field area breathe */
  .bw-step-wrap .bw-console-field {
    padding: 18px 20px !important;
  }
}
@media (max-width: 1023px) {

  /* Make the entire mold helper block breathe */
  .bw-mold-stack {
    padding: 18px 20px;
    border-radius: 10px;
    gap: 16px;
  }

  /* Enlarge the helper text */
  .bw-mold-stack-text {
    font-size: 2rem !important;
    line-height: 2.2;
    margin-bottom: 12px;
  }

  /* Make the mold dimension inputs full-width and big */
  .bw-mold-stack .bw-console-field {
    width: 100%;
  }

  .bw-mold-stack .bw-input,
  .bw-mold-stack .bw-input.bw-input--mini {
    width: 100%;
    font-size: 1rem !important;
    padding: 16px 18px !important;
    height: auto !important;
  }
}
@media (max-width: 1023px) {

  /* Regular text inside the Start-A-Batch console */
  .bw-console-fields,
  .bw-console-fields * {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
  }

  /* Mold Helper toggle button */
  .bw-helper-toggle {
    font-size: 1.5rem !important;
    padding: 16px 20px !important;
    line-height: 1 !important;
  }

  /* Mold Helper text block */
  .bw-mold-stack-text,
  .bw-mold-stack-text p {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    font-weight: 400;
  }
}
@media (max-width: 1023px) {

  /* Mold Helper toggle — slim button */
  .bw-helper-toggle {
        display: block;
    width: 100%;
    text-align: center;
    background: var(--bw-accent, #f5f1e8);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 5px 5px;
    font-size: 1rem;
    font-weight: 400;
    color: #1f1b17;
    text-decoration: none;
  }

  /* Optional: make the water toggle match */
  .bw-water-toggle {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--bw-accent, #f5f1e8);
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 5px 5px;
    font-size: 1rem;
    font-weight: 400;
    color: #1f1b17;
    text-decoration: none;
  }
}
  @media (max-width: 1023px) {

  /* Remove the big gap under the mold helper block */
  .bw-console-group--full {
    margin-bottom: -4px !important; /* was much larger */
  }

  /* Tighten spacing inside the mold helper area */
  .bw-mold-stack {
    margin-top: 2px !important;
    margin-bottom: -2px !important;
  }

  /* Tighten spacing under the toggle itself */
  .bw-helper-toggle {
    margin-bottom: -25px !important;
  }
}  
@media (max-width: 1023px) {
  .bw-action-stack--mobile {
    position: relative;
    z-index: 50;
    margin-top: 16px;
    width: 100%;
  }

  .bw-save-prefs {
    display: block;
    width: 100%;
    padding: 16px 20px;
    font-size: 1.25rem;
    border-radius: 8px;
    background: var(--bw-accent, #f5f1e8);
    border: 1px solid rgba(0,0,0,0.15);
  }
}
#rc-lye-type.bw-step-label {
  background: none !important;
  padding: 0 !important;
  border: none !important;
  min-height: 0 !important;
}
@media (max-width: 1023px) {
  .bw-step-wrap,
  .bw-console-group--left,
  .bw-console-group--right {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bw-console-group--left .bw-console-field,
  .bw-console-group--right .bw-console-field {
    width: 100% !important;
  }
}
@media (max-width: 1023px) {
  .bw-console-group--left,
  .bw-console-group--right {
    margin-bottom: -2rem !important; /* adjust as needed */
  }

  /* optional: remove the last group's margin */
  .bw-console-group--right:last-child {
    margin-bottom: 1.5rem !important;
    margin-top: 1rem;
  }
}
@media (max-width: 1023px) {
  .bw-step-wrap {
    width: 100% !important;
    display: block !important;
    margin-bottom: 1.5rem !important; /* the actual gap */
  }

  /* Prevent margin collapse inside flex/grid parents */
  .bw-console-fields {
    display: block !important;
  }
}
.bw-save-prefs {
  width: auto !important;
  height: auto !important;
  padding: 0.5rem 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 8px !important;
}
/* -----------------------------------------
   STEP CARD STYLE — MATCHES TITLE BAR AESTHETIC
   ----------------------------------------- */
 @media (max-width: 1023px) {  
.bw-step-wrap .bw-console-fields {
  background: linear-gradient(135deg, #f4e9d3, rgba(169, 162, 149, 0.59));
  border: 2px solid rgb(111, 108, 102);
  border-radius: 6px;
  padding: 0.75rem 1rem; /* more breathing room than title bar */
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.55),
    0 2px 4px rgba(0,0,0,0.10);
  margin-bottom: 1rem; /* the visual separation you wanted */
}

/* Optional: make the step header text inside look intentional */
.bw-step-wrap .bw-step-label {
  font-weight: 500;
  color: #4a4235;
  margin-bottom: 0.5rem;
 }
 .bw-step-wrap {
  background: #faf7f2;
  border: 1px solid rgba(111,108,102,0.35);
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}
} 
/* Fix the radio rows */
.bw-lye-radios .bw-lye-row {
  display: flex !important;
  align-items: left !important;
  gap: 10px !important;
  padding: 2 !important;
  margin: 2px 0 !important;
  line-height: 1.8 !important;
  font-size: 1.5rem !important;
}

/* Fix the radio input size + alignment */
.bw-lye-radios .bw-lye-radio {
  width: 16px !important;
  height: 16px !important;
  margin: 2 !important;
  flex-shrink: 0 !important;
  align: left
}
.bw-lye-radios {
  text-align: left !important;
  display: block !important;
}
/* Prevent label text from wrapping weirdly */
.bw-lye-radios .bw-lye-row {
  white-space: nowrap !important;
}
.bw-lye-radios .bw-lye-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  width: 100% !important;
  text-align: left !important;
}
@media (max-width: 1023px) {

  /* Force the Step 4 field row to behave */
  .bw-water-label .bw-console-field {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Prevent the label from taking the whole line */
  .bw-water-label .bw-console-field label {
    display: inline-flex !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }

  /* Prevent the input from forcing a wrap */
  .bw-water-label .bw-console-field input,
  .bw-water-label .bw-console-field select {
    min-width: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 1023px) {

  /* Make the entire Step 4 row behave like a single line */
  .bw-water-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Label must NOT take the whole line */
  .bw-water-label {
    display: inline-flex !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Input/select must be allowed to shrink */
  .bw-water-input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Radio must not push anything around */
  .bw-water-radio {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
}
@media (max-width: 1023px) {

  /* Step label strip */
  .bw-step-label {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
  }

  /* The group wrapper inside each step */
  .bw-water-stack,
  .bw-lye-stack,
  .bw-console-group {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  /* Group titles (these add a LOT of height on mobile) */
  .bw-water-group-label,
  .bw-console-group-label {
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  /* Each row (radio + label + input) */
  .bw-water-row,
  .bw-lye-row,
  .bw-console-row {
    margin: 2px 0 !important;
    padding: 2px 0 !important;
    line-height: 1.2 !important;
  }

  /* Inputs are too tall on mobile */
  .bw-water-input,
  .bw-lye-input,
  .bw-console-input,
  select.bw-water-input {
    height: 32px !important;
    padding: 4px 6px !important;
    line-height: 1.2 !important;
  }

  /* Dividers */
  .bw-water-divider {
    margin: 6px 0 !important;
  }
}
@media (max-width: 1023px) {

  /* Step labels (these are tall on mobile) */
  .bw-step-label {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
  }

  /* Console group wrapper (NOT water or lye) */
  .bw-console-group {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }

  /* Console group titles */
  .bw-console-group-label {
    margin: 0px 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  /* Console rows (NOT water or lye rows) */
  .bw-console-row {
    margin: 0px 0 !important;
    padding: .5px 0 !important;
    line-height: 1.2 !important;
  }

  /* Console labels */
  .bw-console-label {
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  /* Console inputs (NOT water or lye inputs) */
  .bw-console-input {
    height: 18px !important;
    padding: 2px 6px !important;
    line-height: 1.2 !important;
  }
}
@media (max-width: 1023px) {

  /* Tighten the space between the gold underline and the next group */
  .bw-console-group {
    margin-bottom: 6px !important;   /* reduce from Broadcast’s ~20–28px */
    padding-bottom: 0 !important;
  }

  /* Also tighten the step wrapper if it’s adding extra space */
  .bw-step-wrap:not(.bw-water-stack):not(.bw-lye-stack) {
    margin-bottom: 6px !important;
    padding-bottom: 0 !important;
  }
    /* Center the SF value inside its input */
  .data-bw-pref-superfat {
    text-align: center !important;
  }
}

  /* Center the SF value inside its input */
  .data-bw-pref-superfat {
    text-align: center !important;
}
@media (max-width: 1023px) {
  .bw-console__header p {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    font-weight: 400;
  }
}
@media (max-width: 1023px) {
  .bw-recipe-helper {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
}
@media (max-width: 1023px) {
  .bw-sr-open-message {
    font-size: 1.4rem !important;
    font-weight: 500;
    line-height: 1.4 !important;
    text-align: left !important; /* replaces <center> */
  }
}


/*****************************************/
/*---------Helper Bubbles ------------------
/*****************************************/
/* Golden bubble with "i" */
 .bw-help-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  font-size: 11px;
  font-weight: 400;
  color: #5a4610; /* darker gold-brown for contrast */
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8e6, #d4a94f);
  border: 1px solid #c89b3c;
  box-shadow: 0 0 4px rgba(212, 169, 79, 0.6);
  cursor: pointer;
  margin-left: 6px;
  position: relative;
}

/* Tooltip – centered, always on top */
.bw-help-bubble:hover::after {
  all: unset;
  content: attr(data-help);

  /* LAYERING */
  position: fixed;
  z-index: 99999;

  /* CENTER OF VIEWPORT */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* SHAPE + READABILITY */
  width: min(90vw, 320px);
  max-width: 320px;
  white-space: normal;
  box-sizing: border-box;
  line-height: 1.4;

  /* STYLE */
  background: rgba(255, 254, 252, 0.85);
  color: #000000;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 12px;
  border: 3px solid #d4b483;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);

  /* INTERACTION */
  pointer-events: none;

  /* ANIMATION */
  opacity: 0;
  animation: bw-tooltip-fade 0.15s ease-out forwards;
}

@keyframes bw-tooltip-fade {
  from { opacity: 0; transform: translate(-50%, -52%); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
@media (max-width: 1023px) {
  .bw-help-bubble:hover::after {
    font-size: 20px !important;   /* bigger text */
    line-height: 1.5 !important;
    padding: 20px 20px !important; /* bigger tap-friendly bubble */
    max-width: 200vw !important;    /* wider for readability */
  }
}
/* Remove transparency from tooltip text */
.bw-help-bubble:hover::after {
  opacity: 1 !important;        /* full opacity */
  color: #3a3a3a !important;    /* your normal text color */
  background-color:rgb(255, 255, 255);
}
@media (max-width: 1023px) {
  .bw-help-bubble:hover::after {
    /* Bigger text */
    font-size: 20px !important;
    font-weight: 400;
    line-height: 1.5 !important;

    /* Wider bubble */
    min-width: 90vw !important;
    max-width: 200vw !important;

    /* More padding for readability */
    padding: 16px 18px !important;

    /* Centered modal style */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }
}

/*======END MOBILE TOOLTIP======*/

.bw-water-row {
  display: grid;
  grid-template-columns: 18px 1fr 55px; /* radio | label | input */
  align-items: center;
  column-gap: 6px;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
  margin: 4px 0;
  min-height: 22px;   /* allows tooltip to expand */
  position: relative; /* tooltip anchor */
  overflow: visible;  /* tooltip can escape */
}
.bw-water-row {
  margin: 2px 0; /* tighter than 4px */
}
.bw-water-divider {
  margin: 4px 0; /* tighter than 6px */
}
.bw-water-group-label {
  margin-bottom: 2px; /* tighter than 4px */
}
.bw-water-row {
  display: grid;
  grid-template-columns: 18px auto auto 60px;
  align-items: center;
  column-gap: 8px;
  margin: 3px 0;
  position: relative;
  overflow: visible;
}

.bw-help-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 12px;       /* keeps the circle perfectly sized */
  width: 12px;
  line-height: 1;
  top: 1px;           /* nudge up or down as needed */
}
.bw-help-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 12px;
  width: 12px;
  line-height: 1;
  font-size: 11px;
  border-radius: 50%;
  background: #d4b483; /* your gold */
  color: #fff;
  cursor: pointer;
}
.bw-titlebar__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
@media (max-width: 1023px) {
  .bw-help-bubble:hover::after {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;

    position: fixed !important;
    max-width: 80vw !important;
    width: auto !important;

    z-index: 999999;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  }
}
.bw-sr-linevalue {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
@media (max-width: 1023px) {
  select.bw-water-input,
  select.bw-lye-input,
  .bw-water-input,
  .bw-lye-input {
    color: #4a4235 !important; /* your normal text color */
    -webkit-text-fill-color: #4a4235 !important; /* fixes iOS */
    opacity: 1 !important;
  }

  /* Kill Broadcast’s fake placeholder layer */
  select.bw-water-input::-ms-value,
  select.bw-lye-input::-ms-value {
    color: #4a4235 !important;
  }

  /* Remove theme’s custom overlay that hides selected text */
  .select__select,
  .select__select:focus {
    color: #4a4235 !important;
    -webkit-text-fill-color: #4a4235 !important;
  }
}
@media (max-width: 1023px) {

  /* Bigger bubble size */
  .bw-help-bubble {
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }

  /* Better tap target */
  .bw-help-bubble {
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Optional: slightly darker for visibility */
  .bw-help-bubble {
    background:rgb(210, 180, 130) !important;
    color: #4a4235 !important;
    border: 1px solid rgba(29, 26, 22, 0.6) !important;
  }
}
@media (max-width: 1023px) {

  /* Any popup inserted immediately after a help bubble */
  .bw-help-bubble + div {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    padding: 1rem !important;
    max-width: 90vw !important;
  }

  /* If the script wraps the text inside another element */
  .bw-help-bubble + div * {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
}
@media (max-width: 1023px) {

  /* Any popup inserted immediately after a help bubble */
  .bw-help-bubble + div {
    font-size: 1rem !important;
    line-height: 1.45 !important;
    padding: 1rem !important;
    max-width: 90vw !important;
  }

  /* If the script wraps the text inside another element */
  .bw-help-bubble + div * {
    font-size: 1rem !important;
    line-height: 1.45 !important;
  }
}
/* ============================
   DESKTOP‑ONLY LAYOUT + SIZING
   ============================ */
 /*-------DESKTOP----------*/
@media (min-width: 1200px) {
 /* DO NOT DELETE */
.bw-step-wrap {
  /* restore original behavior */
  background: none;
  border: none;
  padding: 0;
  margin: 0;
 }

/* apply visuals ONLY to the inner content */
.bw-step-wrap > .bw-step-label,
.bw-step-wrap > .bw-console-field {
  /*background: #faf7f2;              /* warm cream */
  /*border-left: 3px solid #d4af37;   /* gold accent */
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 0px;
  font-size: 0.80rem;
  font-weight: 400;
  letter-spacing: 0.3px;
  margin-bottom: 2px;

 }
/* Water block width */
.bw-water-stack {
  width: flex !important;   /* adjust as needed */
 }

/* Base label color for everything */
.bw-step-label {
  color: #1f1b17; /* Lalaland Dark */
  font-weight: 400;
 }

/* Style ONLY the “Step X:” prefix */
.bw-step-label::before {
  content: attr(data-step-prefix);
  color: rgb(165, 33, 51);
  font-weight: 400;
 }

/* Hide the original prefix so it doesn't double-render */
.bw-step-label[data-step-prefix] {
  visibility: visible;
  position: relative;
 }

.bw-step-label[data-step-prefix]::before {
  visibility: hidden;
  position: absolute;
  left: 0;
  top: 0;
 }
/* DESKTOP Build Recipe button */
  /*.bw-action-stack .bw-mobile-jump a {
    padding: 0.2rem 0.2rem;
    line-height: 1;
    margin: 0;
    width: 110px;
    display: inline-block;
    background: rgba(154, 128, 81, 0.29);
    color: #1f1b17; /* Lalaland Dark 
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 600;
    text-decoration: none;*/
   /*} */
/* Shared button styling for both desktop + mobile */
   .bw-mobile-jump a,
    a.bw-mobile-jump,
   .bw-action-stack .bw-mobile-jump a {
    padding: 0.3rem 0.6rem;
    line-height: 1;
    margin: 0;
    display: inline-block;
    background: rgba(154, 128, 81, 0.29);
    color: #1f1b17; /* Lalaland Dark */
    border-radius: 0px;
    font-size: 0.7rem;
    font-weight: 500;
    text-decoration: none;

    /* NEW: even sizing */
    min-width: 60px;   /* adjust if you want them wider or narrower */
    text-align: center; /* ensures text stays centered */
 }

/* NEW: tiny spacing between buttons */
.bw-action-stack--mobile,
.bw-action-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;  /* tiny bit of space */
 }

.bw-action-stack {
  display: block;   /* restore original behavior */
 }

.bw-helper-toggle {
  cursor: pointer;
 }
/* Force mold helper inputs into a horizontal row */
.bw-mold-stack {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.5rem !important;
  align-items: center !important;
 }

/* Remove console field vertical stacking inside mold helper */
.bw-mold-stack .bw-console-field {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
 }

/* Force the inputs to be exactly 3ch wide */
.bw-mold-stack .bw-input--mini {
  width: 3ch !important;
  min-width: 3ch !important;
  max-width: 3ch !important;
  text-align: center !important;
 }

/* Force the inputs to be exactly 3ch wide */
.bw-mold-stack .bw-input--mini {
  width: 3ch;
  min-width: 3ch;
  max-width: 3ch;
  text-align: center;
 }
/* Center the mold helper row under the toggle */
.bw-mold-stack {
  justify-content: center !important;
  margin-top: 1rem !important;
  width: 100% !important;
 }
/* Tighten spacing between toggle and mold helper row */
.bw-helper-toggle + .bw-mold-stack {
  margin-top: -1rem !important; /* very tight */
 }

/* Add breathing room between mold helper and the console inputs below */
.bw-mold-stack {
  margin-bottom: 1rem !important;
 }

/* Placeholder text using brand red */
::placeholder {
  color: var(--lalaland-red) !important;
  opacity: 1;
 }

.bw-input::placeholder,
select.bw-input option[disabled][selected] {
  color: var(--lalaland-red) !important;
  opacity: 1;
 }  
  .bw-console-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* title centered via flex trick below */
  background: linear-gradient(135deg, #f4e9d3, rgba(169, 162, 149, 0.59));
  border: 1px solid rgb(111, 108, 102);
  border-radius: 6px;
  padding: 0.1rem 0.1 rem;
  margin-bottom: 0.65rem;
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,0.55),
    0 2px 4px rgba(0,0,0,0.10);
  position: relative;
  cursor: pointer;
  height: 2.5rem !important; /* reduce height to better match console bar */
  }
} 
  @media (min-width: 1200px) {

  /* ============================================
     NORMAL STEP BOXES (Steps 1, 2, 3)
     ============================================ */
  .bw-step-wrap:not(:has(.bw-water-stack)):not(:has(.bw-lye-radios)) {
    width: 90px !important;
  }

  .bw-step-wrap:not(:has(.bw-water-stack)):not(:has(.bw-lye-radios))
    .bw-console-field .bw-input,
  .bw-step-wrap:not(:has(.bw-water-stack)):not(:has(.bw-lye-radios))
    .bw-console-field select.bw-input {
      width: 90px !important;
      height: 22px !important;
      padding: 2px 4px !important;
      font-size: 0.80rem !important;
      line-height: 1.1 !important;
  }

  /* ============================================
     WATER (Step 4)
     ============================================ */
  .bw-step-wrap:has(.bw-water-stack) {
    width: 360px !important;
  }

  .bw-water-row .bw-water-input,
  .bw-water-row select.bw-water-input {
    width: flex !important;
    height: 26px !important;
    padding: 3px 6px !important;
    font-size: 0.8rem !important;
  }

  /* ============================================
     LYE (Step 5)
     ============================================ */
  .bw-lye-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 22px !important;
    font-size: 0.8rem !important;
  }

  .bw-lye-row input[type="radio"] {
    transform: scale(0.85);
    margin-right: 4px;
  }

  /* ============================================
     BUTTONS
     ============================================ */
  .bw-save-prefs {
    height: 15px !important;
    padding: 4px 10px !important;
    font-size: 0.80rem !important;
    line-height: 1.1 !important;
  }
  .bw-step-wrap {
  /*border: 1px solid rgba(0,0,0,0.12);*/
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
 }

 /* Header strip */
 .bw-step-label {
  background: var(--bw-accent, #f5f1e8);
  padding: 2px 2px;
  font-weight: 500;
  font-size: 0.80rem;
  border-bottom: 2px solid rgba(160, 149, 86, 0.85);
 }

 /* Body/value area */
.bw-step-wrap .bw-console-field {
  padding: 4px 4px;
 }
 /* ----------------------------------------------------
   STEP GROUP BASELINE ALIGNMENT
   Ensures Water + Lye align cleanly with the compact steps
---------------------------------------------------- */
.console-step-group {
  align-items: flex-start;
 }

/* ----------------------------------------------------
   WATER GROUP — breathing room + clarity
---------------------------------------------------- */
.step-water {
  padding: 0.75rem 1rem;        /* more internal space */
 }

.step-water .ratio-display {
  font-size: .8rem;            /* slightly larger ratio */
  line-height: 1;
  margin-top: 0.25rem;
}

.step-water label {
  margin-bottom: 0.35rem;
  display: block;
 }

/* ----------------------------------------------------
   LYE GROUP — smaller font + tighter radio alignment
---------------------------------------------------- */
.step-lye {
  padding: 0.5rem 1rem;
 }

.step-lye label {
  font-size: 0.8rem;           /* smaller label text */
  line-height: 1;
 }

.step-lye .radio-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;                  /* tighter spacing */
  margin-bottom: 0.35rem;
 }

.step-lye input[type="radio"] {
  transform: scale(0.85);       /* smaller radios */
 }

/* ----------------------------------------------------
   BUTTONS — reduce visual weight
---------------------------------------------------- */
.console-actions button {
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
 }
 /* Fix the radio rows */
.bw-lye-radios .bw-lye-row {
  display: flex !important;
  align-items: left !important;
  gap: 4px !important;
  padding: 2 !important;
  margin: 2px 0 !important;
  line-height: 1 !important;
  font-size: .7rem !important;
 }
 /* Fix the radio input size + alignment */
.bw-lye-radios .bw-lye-radio {
  width: 14px !important;
  height: 14px !important;
  margin: 2 !important;
  flex-shrink: 0 !important;
  align: left
 }
 /* Force the Step 4 field row to behave */
  .bw-water-label .bw-console-field {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  /* Prevent the label from taking the whole line */
  .bw-water-label .bw-console-field label {
    display: inline-flex !important;
    white-space: nowrap !important;
    width: auto !important;
    flex: 0 0 auto !important;
  }
   /* Prevent the input from forcing a wrap */
  .bw-water-label .bw-console-field input,
  .bw-water-label .bw-console-field select {
    min-width: 0 !important;
    width: auto !important;
    flex: 0 1 auto !important;
    white-space: nowrap !important;
  }
 /* Make the entire Step 4 row behave like a single line */
  .bw-water-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }
  /* Label must NOT take the whole line */
  .bw-water-label {
    display: inline-flex !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
    /* Input/select must be allowed to shrink */
  .bw-water-input {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
  }

  /* Radio must not push anything around */
  .bw-water-radio {
    flex-shrink: 0 !important;
    margin: 0 !important;
  }
   /* The group wrapper inside each step */
  .bw-water-stack,
  .bw-lye-stack,
  .bw-console-group {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
  /* Group titles (these add a LOT of height on mobile) */
  .bw-water-group-label,
  .bw-console-group-label {
    margin: 2px 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  /* Each row (radio + label + input) */
  .bw-water-row,
  .bw-lye-row,
  .bw-console-row {
    margin: 2px 0 !important;
    padding: 2px 0 !important;
    line-height: 1.2 !important;
  }
  /* Inputs are too tall on mobile */
  .bw-water-input,
  .bw-lye-input,
  .bw-console-input,
  select.bw-water-input {
    height: 24px !important;
    padding: 3px 3px !important;
    line-height: 1 !important;
  }
  /* Dividers */
  .bw-water-divider {
    margin: 6px 0 !important;
  }
  
  /* Console group wrapper (NOT water or lye) */
  .bw-console-group {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    margin-top: 2px !important;
    margin-bottom: 2px !important;
  }
  /* Console rows (NOT water or lye rows) */
  .bw-console-row {
    margin: 0px 0 !important;
    padding: .5px 0 !important;
    line-height: 1 !important;
  }
   /* Console inputs (NOT water or lye inputs) */
  .bw-console-input {
    height: 18px !important;
    padding: 2px 2px !important;
    line-height: 1 !important;
  }
  /* Make Step 1–2 columns narrower */
.bw-console-group--left {
  flex: 0 0 90px;   /* fixed, narrow column */
 }

/* Let the right-side groups (3–5) use the remaining space */
.bw-console-group--right {
  flex: 1 1 auto;
 }
 /* Make ALL bw-input fields exactly the same width */
.bw-console-field input.bw-input,
.bw-console-field select.bw-input {
  width: 6ch;               /* fits the largest content */
  min-width: 6ch;
  max-width: 6ch;
  box-sizing: content-box;  /* ensures 6ch is literal text width */
  padding: 0.2rem 0.35rem;  /* tight, consistent padding */
  height: 32px;             /* uniform height */
  display: block;
  margin: 0 auto;           /* centers input under label */
}

/* Center labels above inputs */
.bw-console-field label {
  display: block;
  text-align: center;
  margin-bottom: 0.15rem;
  line-height: 1.1;
}
/* Make ALL bw-input fields exactly the same width */
.bw-console-field input.bw-input,
.bw-console-field select.bw-input {
  box-sizing: border-box;     /* include padding + border in width */
  width: 6ch;                 /* final visual width = 6ch */
  padding: 0.2rem 0.3rem;     /* tight, consistent padding */
  height: 32px;               /* uniform height */
  display: block;
  margin-left: auto;          /* center under label */
  margin-right: auto;
}

/* Center labels above inputs */
.bw-console-field label {
  display: block;
  text-align: center;
  margin-bottom: 0.15rem;
  line-height: 1.1;
}
/* Normalize ALL bw-input fields (selects + inputs) */
.bw-console-field input.bw-input,
.bw-console-field select.bw-input {
  box-sizing: border-box;      /* ensures width is literal */
  width: 6ch;                  /* final visual width */
  padding: 0.2rem 0.3rem;      /* tight, consistent padding */
  height: 32px;                /* uniform height */
  display: block;
  margin-left: auto;           /* center under label */
  margin-right: auto;
  text-align: center;          /* centers text inside */
}

/* Normalize SELECTS specifically (Step 1 + Step 3) */
.bw-console-field select.bw-input {
  -webkit-appearance: none;
  appearance: none;            /* removes browser default width inflation */
  background-position: right 0.3rem center; /* keeps arrow aligned */
  background-repeat: no-repeat;
}

/* Center labels above inputs */
.bw-console-field label {
  display: block;
  text-align: center;
  margin-bottom: 0.15rem;
  line-height: 1.1;
}
/* Force ALL bw-input fields to match Step 2's width */
.bw-console-field input.bw-input,
.bw-console-field select.bw-input {
  box-sizing: border-box;
  width: 90px;              /* match Step 2 exactly */
  height: 32px;             /* same height */
  padding: 0.2rem 0.3rem;   /* tight, consistent padding */
  display: block;
  margin-left: auto;        /* center under label */
  margin-right: auto;
  text-align: center;
}

/* Center labels above inputs */
.bw-console-field label {
  display: block;
  text-align: center;
  margin-bottom: 0.15rem;
  line-height: 1.1;
}
/* Make Steps 1–3 identical to Step 2 */
.bw-console-fields .bw-console-field input.bw-input,
.bw-console-fields .bw-console-field select.bw-input {
    font-size: 2rem !important;
    padding: 18px 20px !important;
    height: auto !important;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Make ALL inputs match Step 2 exactly */
.bw-console-field .bw-input {
    font-size: 2rem !important;
    padding: 2px 2px !important;
    height: auto !important;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Make Steps 1–3 match Step 2 exactly */
.bw-console-field .bw-input {
    font-size: 2rem !important;
    padding: 2px 2px !important;
    height: auto !important;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Pull the steps closer together */
.bw-console-field {
    margin-bottom: 0.5rem; /* tighten vertical spacing */
}

/* Center labels above inputs */
.bw-console-field label {
    display: block;
    text-align: center;
    margin-bottom: 0.25rem;
}
/* Force Steps 1–3 to match Step 2 exactly */
.bw-console-fields .bw-console-field .bw-input {
    font-size: 2rem !important;
    padding: 18px 20px !important;
    height: auto !important;
    box-sizing: border-box;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/* Pull Steps 1–3 closer together */
.bw-console-field {
    margin-bottom: 0.5rem;
}

/* Center labels above inputs */
.bw-console-field label {
    display: block;
    text-align: center;
    margin-bottom: 0.25rem;
}
/* Make Steps 1–3 inputs align perfectly */
.bw-console-field {
    display: flex;
    flex-direction: column;
    align-items: center;      /* centers label + input together */
    margin-bottom: 0.75rem;   /* tighten spacing between steps */
}

/* Center the input under the label */
.bw-console-field .bw-input {
    display: block;
    margin: 0 auto;
}

/* Move the entire block to the right */
.bw-console-fields {
    margin-left: 0rem;      /* adjust this number to move more/less */
 }
/* Remove the global width forcing from Steps 1–3 */
.bw-setup-console * {
    min-width: unset !important;
    max-width: unset !important;
    box-sizing: border-box; /* keep this safe */
 }
/* Fix alignment for Steps 1–3 */
.bw-console-fields {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;   /* centers all steps */
    gap: 0.75rem !important;          /* even spacing */
    width: 100%;
}
/* Align Steps 1–3 without touching the global layout */
.bw-step-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
 }
/* Turn ONLY Steps 1–3 into a left‑aligned horizontal row */
.bw-console-fields {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;   /* align left */
    align-items: flex-start;        /* top align */
    gap: 0.5remrem;                      /* even spacing between them */
 }
.bw-console-fields {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5rem;
 }
.bw-step-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5rem;
 }
 .bw-step-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
 }
.bw-step-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5rem;
 }

.bw-step-group .bw-console-group {
    display: flex;
    flex-direction: column;
 }
/* Steps 1–3: horizontal row on the left */
.bw-step-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
 }

/* Steps 4–5: vertical stack below */
.bw-step-lower {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
 }
/* STOP the parent from forcing everything into one row */
.bw-console-fields {
    display: block;   /* or grid, but block is safest */
 }

/* Steps 1–3: horizontal */
.bw-step-group {
    display: flex;
    flex-direction: row;
    gap: 1rem;
 }

/* Steps 4–5: vertical */
.bw-step-lower {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: .2rem;
 }
/* FORCE Steps 1–3 to behave as flex items */
.bw-step-group > .bw-console-group {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    flex: 0 0 auto !important;
 }
.bw-step-group {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.2rem;   /* tighten spacing */
 }

.bw-step-group > .bw-console-group {
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    flex: 0 0 auto !important;
 }

.bw-step-wrap {
    width: auto;
    max-width: fit-content;
 }
/* Prevent Step 4 selectors from blowing out the layout */
.bw-water-row {
    width: 100%;
    max-width: 200px; /* adjust to taste */
    box-sizing: border-box;
 }
.bw-water-input {
    width: 40px;
    max-width: 40px; /* or whatever you want */
    box-sizing: border-box;
 }
/* Force all Step 4 selects and inputs to behave */
.bw-water-input,
#water-ratio,
#water-custom-liquid,
#water-pct-oils,
#water-lye-conc {
    width: 40px !important;
    max-width: 40px !important; /* adjust to taste */
    box-sizing: border-box;
    white-space: normal !important;
 }
/* Pull Step 5 upward */
.bw-step-wrap + .bw-step-wrap {
    margin-top: 0rem; /* tighten spacing between Step 4 and Step 5 */
}

/* Remove any leftover bottom margin on Step 4 */
.bw-water-stack {
    margin-bottom: 0 !important;
 }
 /* Steps 4 and 5: horizontal, left-aligned, close together */
.bw-step-lower {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 1rem; /* adjust spacing between Step 4 and Step 5 */
 }
 /* Align Step 4 inputs into a clean vertical column */
.bw-water-row {
    display: grid;
    grid-template-columns: 18px auto auto 60px;
    align-items: center;
    column-gap: 0.5rem;
}

/* Force all Step 4 inputs/selects to the same width */
.bw-water-row select,
.bw-water-row input {
    width: 40px; /* adjust to taste */
    box-sizing: border-box;
}
/* Step 4: align all inputs in a clean right column */
.bw-water-row {
    display: grid;
    grid-template-columns: 18px auto auto 60px;
    align-items: center;
    column-gap: 0.5rem;
}

/* Make sure the input stays exactly 40px and right-aligned */
.bw-water-row select,
.bw-water-row input {
    width: 40px !important;
    justify-self: end; /* aligns the input to the right edge of its column */
}
/* STEP 4: perfect alignment for all rows */
.bw-water-row {
    display: grid;
    grid-template-columns: 18px auto auto 60px;
    align-items: left;
    column-gap: 0.2rem;
}

/* radio + label stay left-aligned */
.bw-water-row input[type="radio"] {
    justify-self: start;
}

.bw-water-row label {
    justify-self: start;
}

/* help bubble stays next to the label */
.bw-water-row .bw-help {
    justify-self: start;
}

/* input/select: fixed width, aligned right */
.bw-water-row select,
.bw-water-row input[type="number"],
.bw-water-row input[type="text"] {
    width: 40px !important;
    justify-self: end;
    box-sizing: border-box;}
} 
/* Story message typography */
@media (max-width: 1023) {
.bw-recipe-message {
    text-align: left;
    margin: 2rem 0;
 }

.bw-recipe-message p {
    font-size: 1.15rem;
    line-height: 1.45;
    font-weight: 400;
    max-width: 28rem;
    margin: 0 auto;
    color: var(--bw-text, #333);
 }

/* Optional: soften the tone */
.bw-recipe-message p {
    font-style: italic;
 }
}
  .bw-help-bubble {
  position: relative;
  z-index: 9999;
}
.bw-help-bubble {
  position: relative;
  z-index: 9999;
}

.bw-water-row,
.bw-water-label,
.bw-water-input,
.bw-water-stack,
.bw-step-lower,
.bw-console-fields {
  overflow: visible;
  position: static; /* ensures no stacking context traps the tooltip */
}

/* Move the gold divider DOWN so Total Oils can sit right above it */
.rc-batch-total {
  position: relative;
}

.rc-batch-total::before {
  top: 0 !important;          /* pulls the line down */
  margin-top: 0 !important;   /* removes the built-in gap */
}
@media (min-width: 1200px) {

  /* STEP 5: Break the flex stretching that forces 846px width */
  .bw-console-field[data-field="lye-type"] {
    display: block !important;       /* ← stops children from stretching */
    width: 110px !important;         /* match your Step 5 width */
    max-width: 110px !important;
    margin: 0 auto !important;
  }

  /* STEP 5: Collapse each radio row */
  .bw-console-field[data-field="lye-type"] .bw-lye-row {
    display: block !important;       /* ← breaks flex child stretching */
    width: 100% !important;          /* ← becomes 110px, not 846px */
    max-width: 100% !important;
    min-width: 0 !important;         /* ← prevents inherited min-width */
    white-space: normal !important;  /* ← allows wrapping */
    text-align: center !important;
    margin: 0 auto !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }
}
@media (min-width: 1200px) {

  /* STEP 5: Make the radio rows look normal again */
  .bw-console-field[data-field="lye-type"] .bw-lye-row {
    width: 110px !important;          /* match Step 5 width */
    max-width: 110px !important;
    display: flex !important;         /* align radio + text nicely */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;              /* spacing between radio + label */
    white-space: normal !important;   /* allow wrapping */
    text-align: center !important;
    margin: 4px auto !important;
    padding: 4px 0 !important;
    box-sizing: border-box !important;
  }

  /* STEP 5: Make the radio input itself not push anything */
  .bw-console-field[data-field="lye-type"] .bw-lye-radio {
    flex-shrink: 0 !important;        /* radio stays small */
  }
}
@media (min-width: 1200px) {

  /* STOP the parent from stretching Step 5 to 900px */
  .bw-step-wrap {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;     /* ← THIS breaks the stretch */
    align-self: center !important; /* ← centers the block in its column */
  }

  /* Now constrain ONLY Step 5 */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) {
    width: 110px !important;       /* your intended width */
    max-width: 110px !important;
    margin: 0 auto !important;
  }
}
@media (min-width: 1200px) {

  /* 1. STOP ALL STEP WRAPS FROM STRETCHING TO 900px */
  .bw-step-wrap {
    flex: 0 0 auto !important;     /* ← breaks flex stretch */
    width: auto !important;
    max-width: none !important;
    align-self: flex-start !important;
  }

  /* 2. NOW SET THE WIDTHS YOU ACTUALLY WANT */

  /* Step 4: Water */
  .bw-step-wrap:has(.bw-water-stack) {
    width: 130px !important;       /* adjust to your taste */
    max-width: 130px !important;
    margin: 0 auto !important;
  }

  /* Step 5: Lye Type */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) {
    width: 110px !important;       /* your intended width */
    max-width: 110px !important;
    margin: 0 auto !important;
  }
}
@media (min-width: 1200px) {

  /* 1. STOP the left and right groups from stretching their children */
  .bw-console-group {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;   /* center children inside each group */
    align-items: flex-start !important;
    gap: 20px !important;                 /* snug spacing */
    width: 100% !important;
  }

  /* 2. LEFT GROUP (Steps 1–3) */
  .bw-console-group--left .bw-step-wrap {
    flex: 0 0 auto !important;            /* stop stretching */
    width: auto !important;
    max-width: none !important;
  }

  /* 3. RIGHT GROUP (Steps 4–5) */
  .bw-console-group--right .bw-step-wrap {
    flex: 0 0 auto !important;            /* stop stretching */
    width: auto !important;
    max-width: none !important;
  }

  /* 4. Set the actual widths you want */
  /* Steps 1–3 */
  .bw-step-wrap:has([data-field="units"]),
  .bw-step-wrap:has([data-field="oil-weight"]),
  .bw-step-wrap:has([data-field="superfat"]) {
    width: 130px !important;
    max-width: 130px !important;
  }

  /* Step 4 */
  .bw-step-wrap:has(.bw-water-stack) {
    width: 130px !important;
    max-width: 130px !important;
  }

  /* Step 5 */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) {
    width: 110px !important;
    max-width: 110px !important;
  }
}
@media (min-width: 1200px) {

  /* 1. Collapse the LEFT and RIGHT groups so they stop stretching to 900px */
  .bw-console-group--left,
  .bw-console-group--right {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;   /* center steps inside each group */
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    width: auto !important;               /* ← THIS collapses the 900px width */
    max-width: none !important;
    margin: 0 auto !important;
    gap: 24px !important;                 /* snug spacing between steps */
  }

  /* 2. Prevent step wraps from stretching inside the groups */
  .bw-console-group--left .bw-step-wrap,
  .bw-console-group--right .bw-step-wrap {
    flex: 0 0 auto !important;            /* ← stops stretch */
    width: auto !important;
    max-width: none !important;
  }

  /* 3. Apply your actual step widths */

  /* Steps 1–3 */
  .bw-step-wrap:has([data-field="units"]),
  .bw-step-wrap:has([data-field="oil-weight"]),
  .bw-step-wrap:has([data-field="superfat"]) {
    width: 110px !important;
    max-width: 110px !important;
  }

  /* Step 4 */
  .bw-step-wrap:has(.bw-water-stack) {
    width: 130px !important;
    max-width: 130px !important;
  }

  /* Step 5 */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) {
    width: 110px !important;
    max-width: 110px !important;
  }
}
@media (min-width: 1200px) {

  /* 1. Collapse ALL console groups so they stop stretching to 900px */
  .bw-console-group {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;   /* center children */
    align-items: flex-start !important;
    width: auto !important;               /* ← THIS collapses the 900px width */
    max-width: none !important;
    margin: 0 auto !important;
    gap: 24px !important;                 /* spacing between steps */
  }

  /* 2. Collapse the LOWER group (Step 4 + Step 5) */
  .bw-step-lower {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    width: auto !important;               /* ← collapse 900px */
    max-width: none !important;
    margin: 0 auto !important;
    gap: 12px !important;
  }

  /* 3. Prevent step wraps from stretching inside groups */
  .bw-step-wrap {
    flex: 0 0 auto !important;            /* ← stops stretch */
    width: auto !important;
    max-width: none !important;
  }

  /* 4. Apply your actual step widths */

  /* Steps 1–3 */
  .bw-step-wrap:has([data-field="units"]),
  .bw-step-wrap:has([data-field="oil-weight"]),
  .bw-step-wrap:has([data-field="superfat"]) {
    width: 110px !important;
    max-width: 110px !important;
  }

  /* Step 4 */
  .bw-step-wrap:has(.bw-water-stack) {
    width: 220px !important;
    max-width: 220px !important;
    padding-right: -6px !important;
  }

  /* Step 5 */
  .bw-step-wrap:has(.bw-console-field[data-field="lye-type"]) {
    width: 150px !important;
    max-width: 150px !important;
    padding-left: -6px !important;
  }
}
@media (min-width: 1200px) {

  /* Restore full-width behavior for the Mold Helper group */
  .bw-console-group--full {
    display: block !important;
    width: 100% !important;          /* ← full width restored */
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;   /* ← centers the toggle */
  }

  /* Center the toggle itself */
  .bw-console-group--full .bw-helper-toggle {
    display: inline-block !important;
    margin: 0 auto !important;
    white-space: nowrap !important;  /* ← prevents wrapping */
  }

  /* Keep the mold panel full-width and centered */
  .bw-console-group--full .bw-mold-stack {
    width: 100% !important;
    max-width: 600px !important;     /* or whatever width you want */
    margin: 16px auto !important;
  }
}
@media (min-width: 1200px) {

  /* Restore full-width behavior ONLY for the Mold Helper group */
  .bw-console-group--full {
    display: block !important;
    width: 100% !important;          /* full width restored */
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;   /* center the toggle */
  }

  /* Center the toggle and prevent wrapping */
  .bw-console-group--full .bw-helper-toggle {
    display: inline-block !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }

  /* Restore mold stack visibility and width */
  .bw-console-group--full .bw-mold-stack {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;     /* adjust if needed */
    margin: 16px auto !important;
  }
}
@media (min-width: 1200px) {

  /* Restore normal block layout for the Mold Helper group */
  .bw-console-group--full {
    display: block !important;        /* ← NOT flex */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Center the toggle */
  .bw-console-group--full .bw-helper-toggle {
    display: inline-block !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }

  /* Ensure the mold stack expands normally when un-hidden */
  .bw-console-group--full .bw-mold-stack {
    display: block !important;        /* ← NOT flex */
    width: 100% !important;
    max-width: 600px !important;
    margin: 16px auto !important;
  }
}
@media (min-width: 1200px) {

  /* Restore full-width, non-flex behavior for the Mold Helper group */
  .bw-console-group--full {
    display: block !important;        /* ← critical */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Ensure the mold stack expands normally when un-hidden */
  .bw-console-group--full .bw-mold-stack {
    display: block !important;        /* ← critical */
    width: 100% !important;
    max-width: 600px !important;
    margin: 16px auto !important;
  }

  /* Center the toggle */
  .bw-console-group--full .bw-helper-toggle {
    display: inline-block !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 1200px) {

  /* Restore full-width behavior for the Mold Helper group */
  .bw-console-group--full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Ensure the mold stack expands normally when un-hidden */
  .bw-console-group--full .bw-mold-stack {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 16px auto !important;
  }
}
@media (min-width: 1200px) {

  /* Restore normal block flow for the TOP-LEVEL console group */
  .bw-console-group:not(.bw-console-group--left):not(.bw-console-group--right):not(.bw-console-group--full) {
    display: block !important;     /* ← CRITICAL */
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Restore full-width behavior for the Mold Helper group */
  .bw-console-group--full {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Ensure the mold stack expands normally when un-hidden */
  .bw-console-group--full .bw-mold-stack {
    display: block !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 16px auto !important;
  }

  /* Center the toggle */
  .bw-console-group--full .bw-helper-toggle {
    display: inline-block !important;
    margin: 0 auto !important;
    white-space: nowrap !important;
  }
}
@media (min-width: 1200px) {

  .bw-mold-stack {
    position: relative !important;
    z-index: 9999 !important;   /* ← bring it above the step groups */
  }

  .bw-console-group--full {
    position: relative !important;
    z-index: 9999 !important;
  }
}
@media (min-width: 1200px) {

  /* Restore normal block layout for mold helper fields */
  .bw-mold-stack .bw-console-field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;        /* ← CRITICAL */
  }

  .bw-mold-stack .bw-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}
@media (min-width: 1200px) {

  /* Restore normal block layout for mold helper fields */
  .bw-mold-stack .bw-console-field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;        /* ← CRITICAL */
    min-width: 0 !important;
  }

  .bw-mold-stack .bw-input {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;      /* ← CRITICAL */
    flex: none !important;        /* ← CRITICAL */
  }
}
@media (min-width: 1200px) {

  /* Restore normal input behavior */
  .bw-mold-stack .bw-input {
    display: block !important;        /* ← CRITICAL */
    flex: none !important;            /* ← CRITICAL */
    justify-content: unset !important;
    align-items: unset !important;
  }

  /* Restore normal field wrapper behavior */
  .bw-mold-stack .bw-console-field {
    display: block !important;
    flex: none !important;
  }
}
@media (min-width: 1200px) {

  /* Prevent step group from covering the mold helper */
  .bw-step-group {
    position: relative !important;
    z-index: 1 !important;
  }

  /* Bring mold helper ABOVE the step group */
  .bw-console-group--full,
  .bw-mold-stack {
    position: relative !important;
    z-index: 9999 !important;
  }
}
@media (min-width: 1200px) {
  .bw-step-group {
    height: auto !important;
  }
  .bw-console-group,
.bw-console-group--full,
.bw-console-fields {
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
 }
.bw-console-group--full {
  flex-wrap: wrap !important;
 }
.bw-setup-console {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
 }
.bw-setup-console {
  display: block !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
 }
.bw-step-wrap {
  align-items: flex-start !important;
 }
.bw-step-group {
  align-items: flex-start !important;
 }
.bw-console-fields {
  align-items: flex-start !important;
 }
.bw-step-wrap {
  display: block !important;
 }
 .bw-step-wrap {
  max-width: 600px;
 }
.bw-console-group--full {
  width: 100% !important;
 }
.bw-console-group--full {
  flex: 1 1 100% !important;
  width: 100% !important;
 } 
 .bw-console-group--full {
  flex: 1 1 100% !important;
  width: 100% !important;
 }
 .bw-console-fields {
  align-items: stretch !important;
}
.bw-mold-stack {
  position: relative !important;
  z-index: 9999 !important;
}
.bw-mold-stack {
  position: relative;
  z-index: 1;
}

.bw-mold-stack > * {
  position: relative;
  z-index: 2;
 }
/* Restore tiny inline mold-helper inputs */
.bw-mold-helper-boxes {
  display: flex;
  gap: 6px;
  align-items: center;
 }
/* Force mold helper inputs to behave normally */
.bw-mold-helper-boxes {
  display: flex;
  gap: 8px;
  align-items: center;
 }

.bw-mold-helper-boxes .bw-console-field {
  flex: 0 0 auto !important;
  width: auto !important;
 }

.bw-mold-helper-boxes .bw-input--mini {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  padding: 4px 6px !important;
  font-size: .85rem !important;
  font-weight: 400;
  box-sizing: border-box;
  display: inline-block !important;
  align-items: center;
 }
 /* Center the mold helper inputs horizontally */
.bw-mold-helper-boxes {
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  width: 100%;
 }
/* Align Water toggle + text to the right */
.bw-water-toggle-wrap {
  display: flex;
  align-items: center;
  margin-left: 20px;
  margin-top: -8px;
 }
  /* Right-align the text under the Water toggle */
.bw-water-advanced > .bw-water-group-label {
  text-align: center;
  padding-right: 0px;
  display: block;
 }
/* Make each water row a clean 3-column grid */
.bw-water-row {
  display: grid !important;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
  width: 100%;
}

/* Right-align the input column */
.bw-water-row .bw-water-input {
  justify-self: end;
  text-align: right;
}
 /* Make water inputs shorter and more compact */
.bw-water-row .bw-water-input {
  height: 16px;
  padding: 2px 6px;
  font-size: 14px;
}
 /* Tighten vertical spacing between water rows */
.bw-water-row {
  padding: 4px 0;
}
/* Clean 2‑column layout for Lye rows */
.bw-lye-row {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  padding: 4px 0; /* tighten vertical spacing */
}
/* Add invisible spacing after water option labels */
.bw-water-label::after {
  content: "";
  display: inline-block;
  width: 4px; /* adjust until bubbles align */
 }

}
/*========NEW LIGHTER HELP BUBBLE =====*/

/* Refined help bubble */
.bw-help-bubble {
  background: #fff; /* light interior */
  border: 1.5px solid #c9a86a; /* soft gold outline */
  color: #c9a86a; /* gold i */

  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 14px;
  line-height: 1;

  /* Reset inherited font so it doesn't affect surrounding text */
  font-family: inherit;
  font-weight: inherit;
}

/* Apply the curved serif "i" ONLY to the bubble's text */
.bw-help-bubble span,
.bw-help-bubble::before {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: bold;
}
@media (max-width: 1023px) {
  .bw-help-bubble {
    background: #fff !important;
    border: 1.5px solid #c9a86a !important;
    color: #c9a86a !important;

    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    font-size: 18px !important;
    line-height: 1 !important;

    font-family: inherit !important;
    font-weight: inherit !important;
  }

  .bw-help-bubble span,
  .bw-help-bubble::before {
    font-family: "Georgia", "Times New Roman", serif !important;
    font-weight: bold !important;
  }
   /* Bigger bubble size */
  .bw-help-bubble {
    width: 24px !important;
    height: 24px !important;
    font-size: 18px !important;
    line-height: 24px !important;
  }

  /* Better tap target */
  .bw-help-bubble {
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
/*=========END LIGHTER HELP BUBBLE=======*/
@media (max-width: 1023px) {
  .bw-titlebar--signature {
    text-align: center;
  }

  .bw-titlebar--signature .bw-titlebar__title {
    display: inline-block;
    text-align: center;
    width: 100%;
    margin: 0;
    padding-left: 10;
  }

  /* Make sure the bubble doesn't pull the title off-center */
  .bw-titlebar--signature .bw-help-bubble {
    margin-left: 6px; /* small, consistent spacing */
  }

}
  .bw-help-bubble {
  position: static !important;
}
.bw-help-bubble {
  scroll-margin-top: 0 !important;
  scroll-snap-align: none !important;
}
html, body {
  scroll-behavior: auto !important;
}
/* Mobile fix: shrink console preference inputs + placeholders */
@media (max-width: 1023px) {
  select.bw-input,
  .bw-select,
  .bw-console textarea {
    font-size: 20px !important;
    padding: 6px 10px !important;
    line-height: 1.2 !important;

    /* Stop Broadcast from auto-scaling */
    transform: none !important;
    -webkit-text-size-adjust: 100% !important;
  }

  /* Placeholder styling */
  .bw-console input::placeholder,
  .bw-input, .bw-select,
  .bw-console textarea::placeholder {
    font-size: 24px !important;
    opacity: 0.8; /* softer, boutique */
    color: var(--bw-placeholder-color, rgb(165, 33, 51));
  }
}
/* Mobile: enlarge recipe card typography in a controlled, elegant way */
@media (max-width: 1023px) {

  /* Title bar + icon + recipe name input */
  .bw-recipe-card-titlebar,
  .bw-recipe-card-titlebar .icon,
  .bw-recipe-name-input input {
    font-size: 20px !important;
  }

  /* Toggles (Properties / Notes / Actions) */
  .bw-recipe-card-toggles button {
    font-size: 16px !important;
    font-weight: 600;
    padding: 4px 4px !important;
  }

  /* Panel headings (Qualities, Fatty Acids) */
  .bw-numbers-col h4 {
    font-size: 24px !important;
    font-weight: 600;
  }

  /* List items inside panels */
  .bw-numbers-col li {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  /* Notes textarea */
  .bw-notecard textarea {
    font-size: 16px !important;
  }

  /* Recipe message ("What story will your soap tell?") */
  .bw-recipe-message {
    font-size: 3rem !important;
    font-weight: 600;
  }

  /* Ingredient labels + values */
  .bw-recipe-card-ingredients .label,
  .bw-recipe-card-ingredients .value {
    font-size: 1rem !important;
    font-weight: 500;
  }

  /* Additional oils (dynamic rows) */
  .rc-oil-label,
  .rc-oil-label-text,
  .rc-oil-value {
    font-size: 1rem !important;
    font-weight: 500;

  }

  /* Remove button (✕) */
  .rc-remove-oil {
    font-size: 18px !important;
  }
} 
  /* Mobile: Maker's Blend row typography */
@media (max-width: 1023px) {

  /* Label text */
  #rc-maker-blend-label {
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.2px;
  }

  /* Value text */
  #rc-maker-blend-value {
    font-size: 1rem !important;
    font-weight: 500 !important;
  }
}
/* Placeholder for Maker's Blend LABEL */
#rc-maker-blend-label:empty::after {
  content: "Maker’s Blend";
  color:rgb(0, 0, 0);
  font-style: italic;
  pointer-events: none;
}
/* Placeholder for Maker's Blend VALUE */
#rc-maker-blend-value:empty::after {
  content: "—";
  color:rgb(0, 0, 0);
  font-style: italic;
  pointer-events: none;
}
#rc-lye-type:empty::after {
  content: "Lye";
  color:rgb(0, 0, 0);
  font-size: 1rem !important;
  font-style: italic;
  pointer-events: none;
}
 /*#rc-lye-type {
  font-weight: 500!important;
  font-size: 1rem !important;
  font-family: inherit !important;
  text-align: left !important;
  display: block !important;
  margin: 0 !important;
}*/
.ingredient {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}
@media (max-width: 1023px) {

  /* Fix the entire ingredient row on mobile */
  .bw-recipe-card-ingredients .ingredient {
     font-weight: 500!important;
    font-size: 1rem !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* Fix the Lye label specifically */
  #rc-lye-type {
    font-size: 1rem !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    text-align: left !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Restore placeholder on mobile */
  #rc-lye-type:empty::after {
    font-size: 1rem !important;
    font-weight: 500!important;
    content: "Lye";
    color:rgb(0, 0, 0);
    font-style: italic;
    pointer-events: none;
  }
}
/* Fix ingredient row layout */
.bw-recipe-card-ingredients .ingredient {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

/* Fix the Lye Type label */
#rc-lye-type {
  font-size: 1rem
  font-weight: 500;
  text-align: left;
  display: block;
  min-width: 120px; /* keeps it from collapsing */
}

/* Restore placeholder when empty */
#rc-lye-type:empty::after {
  content: "Lye Type";
  color:rgb(0, 0, 0);
  font-style: italic;
  pointer-events: none;
}

/* Mobile override */
@media (max-width: 1023px) {
  .bw-recipe-card-ingredients .ingredient {
    justify-content: space-between;
    align-items: flex-start;
    text-align: left;
  }

  #rc-lye-type {
    text-align: left;
    min-width: 120px;
  }
}
/* ------------------------------------------------------ */
/* ⭐ EO BLEND BUILDER — MOBILE STACK + BIGGER            */
/* ------------------------------------------------------ */

@media (max-width: 1023px) {

  /* Parent wrapper */
  .bw-sr-eoblend {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;          /* spacing between the two blocks */
    width: 100%;
    align-items: center;  /* centers the whole stack */
  }

  /* Each linefield block */
  .bw-sr-eoblend .bw-sr-linefield {
    width: 92%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* left-align label + input */
  }

  /* Label + input row */
  .bw-sr-eoblend .bw-sr-linevalue {
    font-size: 1.15rem;     /* bigger text */
    line-height: 1.35;
    width: 100%;
  }

  /* Input wrapper */
  .bw-sr-eoblend .bw-sr-linevalue-input-wrap {
    font-size: 1.2rem;      /* bigger input + % sign */
  }

  /* Number input */
  .bw-sr-eoblend .bw-sr-linevalue-input {
    font-size: 1.2rem;
    padding: 0.4rem 0.5rem;
  }

  /* Underline */
  .bw-sr-eoblend .bw-sr-underline {
    margin-top: 0.4rem;
  }
}
/* ------------------------------------------------------ */
/* ⭐ EO BLEND — MOBILE GRID EXPANSION FIX                */
/* ------------------------------------------------------ */

@media (max-width: 1023px) {

  /* The wrapper is already correct — leave it alone */

  /* EO ROW WRAPPER (holds rows 1–4) */
  .bw-sr-eoblend-row-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  /* EACH EO ROW — FIX GRID COLLAPSE */
  .bw-sr-eoblend-row {
    display: grid !important;

    /* Force the grid to grow vertically */
    grid-auto-rows: max-content !important;

    /* Force the grid to stretch instead of compress */
    align-items: start !important;

    /* Make the row tall enough */
    padding: 1.25rem 0 !important;
    min-height: 140px !important;

    width: 95% !important;
    max-width: 440px !important;
    margin: 0 auto !important;

    row-gap: 0.75rem !important;
  }

  /* Select + input must not collapse */
  .bw-sr-eoblend-row select,
  .bw-sr-eoblend-row input[type="number"] {
    padding: 0.85rem 0.7rem !important;
    font-size: 1.2rem !important;
    height: auto !important;
  }

  /* Underline must be its own row */
  .bw-sr-eoblend-underline {
    grid-column: 1 / -1 !important;
    height: 2px !important;
  }

  /* Safe row must be its own row */
  .bw-sr-eoblend-safe {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 1.1rem !important;
  }

  /* Heart icon */
  .bw-sr-eoblend-safe .safe-heart {
    width: 24px !important;
    height: 24px !important;
  }
}
/* ------------------------------------------------------ */
/* ⭐ EO BLEND — MOBILE GRID FIX (FINAL + CORRECT)        */
/* ------------------------------------------------------ */

@media (max-width: 749px) {

  /* Fix the grid so it actually has 3 rows */
  .bw-sr-eoblend-row {
    display: grid !important;

    /* 3 rows: 
       1 = select + input
       2 = underline
       3 = safe row
    */
    grid-template-rows: auto auto auto !important;

    /* 2 columns: label/input on left, % on right */
    grid-template-columns: 1fr auto !important;

    /* Let the grid grow vertically */
    align-items: start !important;

    /* Add breathing room */
    row-gap: 0.6rem !important;
    padding: 1.25rem 0 !important;

    width: 100% !important;
    max-width: 468px !important;
    margin: 0 auto !important;
  }

  /* Underline must span full width */
  .bw-sr-eoblend-underline {
    grid-column: 1 / -1 !important;
    height: 2px !important;
  }

  /* Safe row must span full width */
  .bw-sr-eoblend-safe {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 1.1rem !important;
  }

  /* Inputs must be tall enough */
  .bw-sr-eoblend-row select,
  .bw-sr-eoblend-row input[type="number"] {
    padding: 0.85rem 0.7rem !important;
    font-size: 1.2rem !important;
    height: auto !important;
  }
}
@media (max-width: 1023px) {

  /* Bring the totals down into the group */
  .bw-sr-eoblend {
    margin-bottom: -1rem !important;   /* pulls totals downward */
    gap: 0.1rem !important;             /* tighten spacing between the two totals */
  }

  /* Pull the EO rows upward so they meet the totals */
  .bw-sr-eoblend-row-wrapper {
    margin-top: -20px !important;            /* removes the gap above row 1 */
  }
}
@media (max-width: 1023px) {

  /* Top two totals */
  .bw-sr-eoblend .bw-sr-linefield {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
  }

  /* Select + % input */
  .bw-sr-eoblend-row select,
  .bw-sr-eoblend-row input[type="number"] {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
  }

  /* Safe row text */
  .bw-sr-eoblend-safe {
    font-size: 1.5rem !important;
  }

  /* Heart icon scaled to match */
  .bw-sr-eoblend-safe .safe-heart {
    width: 35px !important;
    height: 35px !important;
  }
  @media (max-width: 1023px) {

  /* EO Blend % input — final override */
  .bw-sr-eoblend-row input[data-bw-sr-eoblend-percent],
  .bw-sr-eoblend-row select[data-bw-sr-eoblend-percent],
  .bw-sr-eoblend-row [data-bw-sr-eoblend-percent] {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    color:rgb(0, 0, 0) !important;
  }
 }
 @media (max-width: 1023px) {

  /* TOTAL EO BLEND (the top row with the input + %) */
  .bw-sr-eoblend-total .bw-sr-linevalue span,
  .bw-sr-eoblend-total .bw-sr-linevalue-input-wrap input,
  .bw-sr-eoblend-total .bw-sr-linevalue-input-wrap span {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    color:rgb(0, 0, 0)  !important;
    border: 1px solidrgb(108, 107, 104) !important;
    border-radius: 6px !important;

  }

  /* BLEND TOTAL (the row showing 0.0%) */
  .bw-sr-eoblend-totals .bw-sr-linevalue span,
  .bw-sr-eoblend-totals [data-bw-sr-eoblend-total-blend] {
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    color:rgb(0, 0, 0) !important;
    border: 1px solidrgb(108, 107, 104);
    border-radius: 6px !important;

  }
}
}
@media (max-width: 1023px) {

  /* The container holding all 3 oil rows */
  .bw-sr-oils {
    display: flex !important;
    flex-direction: column !important;
    gap: .5rem !important;              /* spacing between rows */
    width: 100% !important;
    Max-width: 468px !important;
  }

  /* Each oil row */
  .bw-sr-oils .bw-inline[data-bw-sr-oil-row] {
    display: flex !important;
    flex-direction: column !important; /* stack select + % + underline */
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    padding: 1rem 0 !important;        /* taller rows */
    row-gap: 0.6rem !important;
  }

  /* Select + % dropdowns */
  .bw-sr-oils select {
    width: 100% !important;
    font-size: 1.5rem !important;
    font-weight: 500;
    padding: 0.1rem 0.1rem !important;
  }

  /* Underline stays full width */
  .bw-sr-oils .bw-sr-underline {
    width: 100% !important;
    height: 2px !important;
  }
}
@media (max-width: 1023px) {

  /* Stack the 3 oil rows vertically */
  .bw-sr-oils {
    display: flex !important;
    flex-direction: column !important;
    gap: .5rem !important;
    width: 100% !important;
  }

  /* Each oil row becomes a vertical block */
  .bw-sr-oils .bw-inline[data-bw-sr-oil-row] {
    display: block !important;        /* ← THIS is the key */
    width: 100%!important;
    max-width: 468px !important;
    margin: 0 auto !important;
    padding: .5rem 0 !important;
  }

  /* Keep the two selects on the same line */
  .bw-sr-oils .bw-inline[data-bw-sr-oil-row] select[data-bw-sr-oil],
  .bw-sr-oils .bw-inline[data-bw-sr-oil-row] select[data-bw-sr-pct] {
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* Oil select wider */
  .bw-sr-oils select[data-bw-sr-oil] {
    width: 70% !important;
  }

  /* Percent select narrower */
  .bw-sr-oils select[data-bw-sr-pct] {
    width: 28% !important;
  }

  /* Underline stays full width under both selects */
  .bw-sr-oils .bw-sr-underline {
    width: 100% !important;
    height: 2px !important;
    margin-top: 0.6rem !important;
  }
}
@media (max-width: 1023px) {

  /* Make each oil row match the width of the EO rows */
  .bw-sr-oils .bw-inline[data-bw-sr-oil-row] {
    width: 100% !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    padding: 0.2rem 0 !important;   /* tighter vertical spacing */
  }

  /* Reduce the gap between the 3 rows */
  .bw-sr-oils {
    gap: 0.1rem !important;
  }

  /* Oil + Percent selects: remove hyperlink look */
  .bw-sr-oils select[data-bw-sr-oil],
  .bw-sr-oils select[data-bw-sr-pct] {
    color:rgb(0, 0, 0) !important;        /* normal text color */
    font-size: 1.5rem !important;     /* bigger font */
    font-weight: 500 !important;      /* removes “link” feel */
    text-decoration: none !important; /* kills hyperlink vibe */
    border: 1px solidrgb(108, 107, 104) !important;
    border-radius: 6px !important;
    background: #fffdf8 !important;
    padding: 0.3rem 0.7rem !important;
    appearance: none !important;      /* removes blue iOS style */
  }

  /* Oil select wider */
  .bw-sr-oils select[data-bw-sr-oil] {
    width:100% !important;
    max-width: 450px !important;
  }

  /* Percent select narrower */
  .bw-sr-oils select[data-bw-sr-pct] {
    width: 28% !important;
  }

  /* Underline stays full width and closer to selects */
  .bw-sr-oils .bw-sr-underline {
    margin-top: 0.4rem !important;
    height: 2px !important;
  }
}
@media (max-width: 1023px) {

  /* Increase the height of each oil row */
  .bw-sr-oils .bw-inline[data-bw-sr-oil-row] {
    padding: 1.25rem 0 !important;   /* was ~0.75–1rem */
    row-gap: 0.75rem !important;     /* slightly more breathing room */
  }

  /* Increase select height to match the taller row */
  .bw-sr-oils select[data-bw-sr-oil],
  .bw-sr-oils select[data-bw-sr-pct] {
    padding: 1rem 0.75rem !important;  /* taller tap targets */
    font-size: 1.5rem !important;     /* scales with the EO rows */
    font-weight: 500;
  }

  /* Underline stays tight but centered visually */
  .bw-sr-oils .bw-sr-underline {
    margin-top: 0.5rem !important;
  }
}

@media (max-width: 1023px) {

  /* Reduce padding so inputs get the space */
  .bw-sr-additives .bw-sr-row {
    padding: 0.1rem 0 !important;        /* minimal padding */
    row-gap: 0.1rem !important;
    column-gap: 0.1rem !important;

    display: grid !important;
    grid-template-columns: 1fr 60px 60px !important;  /* long + two small */
    align-items: center !important;

    width: 100% !important;
    max-width: 468px !important;
    margin: 0 auto !important;
  }

  /* Long additive name select — give it the space */
  .bw-sr-additives select[data-bw-sr-additive] {
    width: 100% !important;
    font-size: 1.5rem !important;
    font-weight: 500;
    padding: 0.75rem 0.6rem !important;   /* tall but not huge */
   background:rgb(255, 255, 255) !important;
    border: 1px solidrgb(93, 92, 90) !important;
    border-radius: 6px !important;
    color:rgb(0, 0, 0) !important;
    appearance: none !important;
  }

  /* Custom input spans full width */
  .bw-sr-additives [data-bw-sr-additive-custom-wrapper] {
    grid-column: 1 / -1 !important;
  }

  .bw-sr-additives [data-bw-sr-additive-custom-wrapper] input {
    width: 100% !important;
    font-size: 1.5rem !important;
    font-weight: 500;
    padding: 0.75rem 0.6rem !important;
    background:rgb(255, 255, 255) !important;
    border: 1px solidrgb(93, 92, 90) !important;
    border-radius: 6px !important;
    color:rgb(0, 0, 0) !important;
  }

  /* Small selects — make them actually small */
  .bw-sr-additives select[data-bw-sr-additive-amount],
  .bw-sr-additives select[data-bw-sr-additive-unit] {
    width: 100% !important;
    font-size: 1.5rem !important;
    font-weight: 500;
    padding: 0.65rem 0.5rem !important;   /* tall enough, but compact */
    background:rgb(255, 255, 255) !important;
    border: 1px solidrgb(93, 92, 90) !important;
    border-radius: 6px !important;
    color:rgb(0, 0, 0) !important;
    appearance: none !important;
  }
}
@media (max-width: 1023px) {

  /*  console header text on mobile */
  .bw-console__header {
    text-align: center !important;
    font-size: 3rem !important;
    font-weight: 500;
  }

}
  /* Kill the <center> tag’s centering on mobile */
  /*.bw-console__header center {
    text-align: left !important;
    display: block !important;
  }*/

@media (max-width: 1023px) {

  /* Force the entire helper header to left-align */
  .bw-recipe-helper,
  .bw-recipe-helper *,
  .bw-recipe-helper p,
  .bw-recipe-helper center {
    align: center !important;
  }

  /* Make sure the block itself isn't centered by a parent */
  .bw-recipe-helper {
  
    justify-content: flex-start !important;
  }
  /* Make the bubble and text sit side-by-side, aligned at the top */
.bw-recipe-message {
  display: flex;
  align-items: flex-start;   /* bubble + text hug the top */
  gap: 0.1rem;               /* small space between bubble + text */
}

/* Bubble stays tight to the left */
.bw-recipe-message .bw-help-bubble {
  margin-top: 0.25rem;       /* micro-adjust to align visually with text */
  margin: 8px;                 /* remove default paragraph spacing */
}

/* Left-align the text and override <center> */
.bw-recipe-message p,
.bw-recipe-message center {
  text-align: center !important;
  display: block !important;
 
}

/* Optional: adjust text styling */
.bw-recipe-message p {
  font-size: 1.5rem !important;        /* adjust as needed */
  font-weight: 500;          /* adjust as needed */
  line-height: 1.4;          /* adjust as needed */
  margin: 8px;
 }
 /* Console inputs + selects: smaller font */
.bw-console-fields .bw-input {
  font-size: 1rem !important;
  font-weight: 300 !important;
}

/* Placeholder text smaller + lighter */
.bw-console-fields .bw-input::placeholder {
  font-size: 1rem !important;
  font-weight: 300;

}

/* Select option text smaller */
.bw-console-fields select.bw-input option {
  font-size: 1rem !important;
}
} 
/* Liquid row: label + bubble aligned on the same line */
.bw-sr-liquid {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Wrap the label + bubble together */
.bw-sr-liquid .bw-sr-linevalue {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem;
}

/* Bubble snug to the right of the label */
.bw-sr-liquid .bw-help-bubble {
  margin: 0;
  transform: translateY(-1px); /* micro‑alignment tweak */
}
@media (max-width: 1023px) {

  /* Center all tooltips on mobile */
  .bw-help-bubble:hover::after,
  .bw-help-bubble:focus::after {
    left: 50% !important;
    transform: translateX(-50%) translateY(-0.5rem) !important;
    max-width: 90vw !important;   /* prevents overflow */
    white-space: normal !important;
  }
/* Make all help tooltips fully opaque and solid */
.bw-help-bubble::after,
.bw-help-bubble[data-help]::after {
  opacity: 1 !important;
  background: #f3f1ea !important;   /* solid cream */
  color: #3a3a3a !important;        /* solid text */
 }

}
/* Make all help tooltips fully opaque and solid */
.bw-help-bubble::after,
.bw-help-bubble[data-help]::after {
  opacity: 1 !important;
  background: #f3f1ea !important;   /* solid cream */
  color: #3a3a3a !important;        /* solid text */
 }
 @media (max-width: 1023px) {

  .bw-help-bubble::after,
  .bw-help-bubble[data-help]::after {
    position: fixed !important;
    top: 20vh !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 90vw !important;
    white-space: normal !important;
  }
}
.bw-sr-oils {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* optional spacing */
 }

.bw-sr-oils .bw-inline {
  flex: 1 1 calc(33.333% - 12px); /* 3 per row */
  box-sizing: border-box;
 }
.bw-sr-oils {
  display: flex;
  flex-wrap: wrap;
  gap: 12px; /* optional spacing */
 }
.bw-sr-oils .bw-inline {
  flex: 1 1 calc(32% - 12px);
 }

@media (min-width: 1200) {
.bw-sr-bottom {
  margin-top: -2rem !important;
 } 

/* Widen the input area */
.bw-sr-eoblend .bw-sr-linevalue-input-wrap {
  min-width: 140px; /* space for input + % + bubble */
 }

/* Widen the input itself */
.bw-sr-eoblend .bw-sr-linevalue-input {
  width: 90px;
 }
.bw-sr-row[style] {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
 }

/* 1. Force the grid to actually show spacing */
.bw-sr-additives {
  gap: 16px 20px !important;   /* vertical | horizontal */
  justify-items: start !important;
 }
} 

/* 2. STOP each additive block from stretching edge-to-edge */
.bw-sr-additives .bw-sr-row {
  width: auto !important;
  max-width: 100% !important;
  padding: 10px 12px !important;   /* internal breathing room */
  background:rgb(255, 255, 255);
  border-radius: 6px;
 }
.bw-sr-additives {
  width: 100% !important;
  max-width: 100% !important;
 }

 /* EO Blend Totals Row */
.bw-sr-eoblend {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 36px; /* space between the two blocks */
  margin-bottom: 2px; 
  margin-top: 16px;
 }

/* Make each block wider so bubbles fit */
.bw-sr-eoblend .bw-sr-linefield {
  flex: 0 0 360px; /* adjust to 380px or 400px if needed */
 }
 /* MOBILE ONLY — undo desktop layout */
@media (max-width: 1023px) {

  .bw-sr-additives {
    width: auto !important;
    max-width: none !important;
  }

  .bw-sr-eoblend {
    display: block !important;
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .bw-sr-eoblend .bw-sr-linefield {
    flex: none !important;
    width: 100% !important;
  }
}
/* MOBILE ONLY — fix additives layout */
@media (max-width: 1023px) {

  .bw-sr-additives {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .bw-sr-additives .bw-sr-row {
    width: 100% !important;
  }
  /* FORCE BOTH TITLE BARS TO MATCH EXACTLY */
.bw-console-titlebar,
.bw-titlebar--signature {
  display: flex !important;
  align-items: center !important;
  height: 3rem !important;
  padding: 0 .5rem !important;
  box-sizing: border-box !important;
}
}
/* FORCE BOTH TITLE BARS TO MATCH EXACTLY */
.bw-console-titlebar,
.bw-titlebar--signature {
  display: flex !important;
  align-items: center !important;
  height: 2rem !important;
  padding: 0 .5rem !important;
  box-sizing: border-box !important;
}

/* FORCE INNER TITLES TO MATCH */
.bw-console-title,
.bw-titlebar--signature .bw-titlebar__title {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-weight: 400;
}

/* CENTER THE SIGNATURE CHEVRON LIKE THE CONSOLE */
.bw-titlebar--signature::after {
  align-self: center !important;
}
/* ALIGN TEXT PERFECTLY IN BOTH TITLE BARS */
.bw-console-title,
.bw-titlebar--signature .bw-titlebar__title {
  display: flex !important;
  align-items: center !important;   /* vertical alignment */
  justify-content: left !important; /* horizontal centering */
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  font-weight: 400 !important;
}
.bw-sr-top {
  display: grid !important;
  grid-template-columns: repeat(3, auto) !important;
  justify-content: center !important;
  align-items: center;
  column-gap: 30px;
  margin-bottom: -2rem !important;
 }
 @media (max-width: 1023px) {
  .bw-sr-top {
    grid-template-columns: 1fr !important;
    justify-content: flex-start !important;
    column-gap: 3px !important;
  }
}
/* MATCH BOTH TITLEBARS WITHOUT BREAKING TOGGLES */
.bw-console-titlebar,
.bw-titlebar--signature {
  display: flex;
  align-items: center;
  padding: 0 .5rem;
  box-sizing: border-box;
}

/* MATCH INNER TITLES */
.bw-console-title,
.bw-titlebar--signature .bw-titlebar__title {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: 400;
}

/* DO NOT TOUCH THE CHEVRON PSEUDO-ELEMENT — LET JS CONTROL ROTATION */


/* === YOUR TITLE STYLING (RESTORED) === */
.bw-console__header p {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  font-style: italic;
  color: rgb(141, 128, 83);
  position: relative;
  display: inline-block;
  padding: 0 1.5rem;
}

/* GOLD LINES */
.bw-console__header p::before,
.bw-console__header p::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #b8a97f, #e8dcc0);
  transform: translateY(-50%);
}

.bw-console__header p::before {
  left: 0;
  transform: translate(-100%, -50%);
}

.bw-console__header p::after {
  right: 0;
  transform: translate(100%, -50%);
}
/* HARD COLLAPSE CONSOLE CONTENT WHEN CLOSED */
.bw-setup-console.is-collapsed .bw-console-group,
.bw-setup-console.is-collapsed .bw-console-fields,
.bw-setup-console.is-collapsed .bw-step-group,
.bw-setup-console.is-collapsed .bw-step-lower,
.bw-setup-console.is-collapsed .bw-action-stack--mobile {
  display: none !important;
}

/* SIGNATURE ROW TOP GRID */
.bw-sr-top {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  align-items: center;
  column-gap: 30px;
  margin-bottom: -2rem;
}

@media (max-width: 1023px) {
  .bw-sr-top {
    grid-template-columns: 1fr;
    justify-content: flex-start;
    column-gap: 3px;
  }
}
.bw-sr-linevalue {
  display: flex !important;
  justify-content: center !important;  /* centers text + bubble together */
  align-items: center !important;
  gap: 6px !important;                 /* space between text and bubble */
  width: 100%;
}

.bw-sr-linevalue p {
  margin: 0 !important;
  padding: 0 !important;
}

.bw-help-bubble {
  margin: 0 !important;
}
/* MOBILE ONLY — left align + smaller font */
@media (max-width: 1023px) {

  .bw-sr-linevalue {
    display: flex !important;
    justify-content: flex-start !important; /* left align */
    align-items: center !important;
    gap: 4px !important; /* tighter spacing */
    width: 100%;
  }

  .bw-sr-linevalue p {
    font-size: 0.9rem !important; /* smaller mobile font */
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 1023px) {

  /* Force tooltip to center on mobile */
  .bw-help-bubble[data-help]:hover::after,
  .bw-help-bubble[data-help]:focus::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
  }

  /* Fix vertical placement so it doesn't drop too low */
  .bw-help-bubble[data-help]:hover::after,
  .bw-help-bubble[data-help]:focus::after {
    top: -10px !important; /* adjust upward */
  }

  /* Optional: widen tooltip for mobile readability */
  .bw-help-bubble[data-help]::after {
    max-width: 85vw !important;
    white-space: normal !important;
    background-color:rgb(255, 255, 255);
  }
}
/* Restore original label styling */
.bw-sr-blend {
  font-size: 18px !important;              
  font-weight: 350;             
  color: rgb(0, 0, 0);          
  display: inline-block;
  line-height: 1.4;             /* keeps text sitting correctly */
  padding-bottom: 4px;          /* restores spacing above underline */
  border-bottom: 2px solid #C9A86A !important; 
}
/* Restore original label styling for Liquid Option */
.bw-sr-liquid {
  font-size: 18px !important;              
  font-weight: 350;             
  color: rgb(0, 0, 0);          
  display: inline-block;
  line-height: 1.4;             /* keeps text sitting correctly */
  padding-bottom: 4px;          /* restores spacing above underline */
  border-bottom: 2px solid #C9A86A !important; 
}
.bw-sr-underline {
    border-bottom: 2px solid #C9A86A !important;
}
/* Restore original label styling for Liquid Option */
.bw-sr-foeo {
  font-size: 18px !important;              
  font-weight: 350;             
  color: rgb(0, 0, 0);          
  display: inline-block;
  line-height: 1.4;             /* keeps text sitting correctly */
  padding-bottom: 4px;          /* restores spacing above underline */
  border-bottom: 2px solid #C9A86A !important; 
}
.bw-sr-linevalue {
    white-space: nowrap;
}
.bw-sr-linefield {
  position: relative;
}
/* -------------------------------------- */
/* EO BLEND CALCULATOR CONTAINER WRAPPER */
/* -------------------------------------- */
.bw-sr-eoblend-container {
  border: 1px solid rgba(0,0,0,0.12);   /* subtle outline */
  border-radius: 8px;                   /* soft rounded corners */
  padding: 10px;                        /* breathing room */
  margin: 10px 0;                       /* spacing from other sections */
  background: #fff;                     /* keeps it clean */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* soft shadow */
}
/* -------------------------------------- */
/* EO BLEND TOP RIGHT NOTE TEXT           */
/* -------------------------------------- */
.bw=eoblend-container, .bw-sr-eoblend-note {
  position: absolute;
  right: 0;
  top: 0;
  color: #555;
  max-width: 250px;
  line-height: 1.3;
  text-align: right;
  pointer-events: none; /* optional: keeps it non-interactive */
}
.bw-sr-eoblend-total,
.bw-sr-eoblend-totals,
.bw-sr-eoblend-note {
  white-space: nowrap;
}
.bw-sr-eoblend-note {
  white-space: nowrap;
  align: center;
  font-style: italic;
  font-size: 1.5rem;
  color:rgb(180, 156, 79);
}
.bw-sr-eotitle-with-bubble {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.bw-help-bubble {
  flex-shrink: 0;
}
.bw-sr-eoblend-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.bw-sr-eotitle-text {
  min-width: 0;
  flex: 0 1 auto;
}
.bw-sr-eotitle-with-bubble {
  display: inline-flex;
  flex-direction: row;     /* forces left → right order */
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-width: 0;            /* prevents container collapse */
}

.bw-sr-eotitle-text {
  flex: 1 1 auto;          /* allows the text to shrink */
  min-width: 0;            /* prevents overflow pushing bubble left */
}
.bw-sr-eoblend-note {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 6px;
  width: 100%;
}
#rc-lye-type {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  display: inline-block;
}
/* Force help tooltips above all nearby elements */
.bw-help-bubble-tooltip,
.bw-help-bubble[data-help]::after,
.bw-help-bubble[data-help]::before {
  position: absolute !important;
  z-index: 999999 !important;
  pointer-events: auto;
}

/* Ensure the bubble itself never outranks the tooltip */
.bw-help-bubble {
  position: relative;
  z-index: 10;
}

/* Prevent parent containers from clipping the tooltip */
.bw-sr-linefield,
.bw-sr-linevalue,
.bw-console-field,
.bw-step-wrap {
  overflow: visible !important;
}
/* Break inherited opacity so tooltips render fully opaque */
.bw-help-bubble {
  position: relative;
  isolation: isolate;
}
/* --- WATER ROW OVERRIDE: 4‑ITEM ROWS ONLY --- */
.bw-water-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  column-gap: 8px;
}
/* --- WATER INPUT UNIFICATION --- */
.bw-water-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

  height: 24px;
  padding: 0 6px;

  font-size: 0.85rem;
  text-align: center;

  color: #333;
}

/* select arrow reset */
.bw-water-input[type="number"]::-webkit-inner-spin-button,
.bw-water-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.bw-water-input[type="number"] {
  -moz-appearance: textfield;
}

.bw-water-input::-ms-expand {
  display: none;
}
/* --- LIQUID OPTION BACKGROUND FIX --- */
#water-custom-liquid {
  background: #fff !important;
}
.bw-sr-liquid-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.bw-water-input:disabled,
.bw-water-radio:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.bw-water-label--disabled {
  opacity: 0.6;
  font-style: italic;
}