/* page.php skips the narrow .bof-prose reading-width cap on pages that
   contain this shortcode, so this just needs to fill its container
   (up to the theme's normal 1180px page width) -- no viewport-relative
   breakout math needed (that approach previously overflowed past the
   content edge on desktop, since 100vw doesn't account for the
   vertical scrollbar's width -- exactly the "Clear All" button bug). */
.bof-calculator {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 32px;
	align-items: start;
	width: 100%;
}
@media (max-width: 860px) { .bof-calculator { grid-template-columns: 1fr; } }

.bof-calculator__browse-panel { position: relative; }
.bof-calculator__browse-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}
.bof-calculator__search,
.bof-calculator__category {
	font-family: var(--bof-font-body);
	font-size: 0.95rem;
	padding: 10px 14px;
	border: 1px solid var(--bof-line);
	border-radius: 999px;
	background: var(--bof-paper);
	color: var(--bof-ink);
}
.bof-calculator__search { flex: 1 1 220px; }

.bof-calculator__browse-list {
	max-height: 520px;
	overflow-y: auto;
	border: 1px solid var(--bof-line);
	border-radius: var(--bof-radius);
	padding: 4px 16px 16px;
	background: var(--bof-paper);
}
.bof-calculator__group-title {
	font-family: var(--bof-font-display);
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	margin: 16px 0 8px;
	padding-top: 8px;
	border-top: 1px solid var(--bof-line);
}
.bof-calculator__group-title:first-child { border-top: none; margin-top: 8px; }
.bof-calculator__browse-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}
@media (max-width: 520px) { .bof-calculator__browse-grid { grid-template-columns: 1fr; } }
.bof-calculator__browse-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	text-align: left;
	padding: 10px 12px;
	border: 1px solid var(--bof-line);
	border-radius: 10px;
	background: var(--bof-paper);
	cursor: pointer;
	font-family: var(--bof-font-body);
}
.bof-calculator__browse-card:hover { background: var(--bof-cream); border-color: var(--bof-secondary); }
.bof-calculator__browse-card-name { font-weight: 600; font-size: 0.9rem; }
.bof-calculator__browse-card-cal { font-family: var(--bof-font-mono); font-size: 0.75rem; color: var(--bof-stone); }
.bof-calculator__empty-note { padding: 16px; color: var(--bof-stone); }

/* ---- Customize panel ---- */
.bof-calculator__customize {
	border: 1px solid var(--bof-line);
	border-radius: var(--bof-radius);
	padding: 20px;
	background: var(--bof-paper);
}
.bof-calculator__back {
	padding: 6px 14px;
	font-size: 0.8rem;
	margin-bottom: 12px;
}
.bof-calculator__customize-title {
	font-size: 1.3rem;
	text-transform: none;
	margin-top: 0;
	margin-bottom: 10px;
}
.bof-calculator__subtotal {
	font-family: var(--bof-font-mono);
	font-size: 0.85rem;
	color: var(--bof-stone);
	margin-bottom: 16px;
}
.bof-calculator__subtotal strong { color: var(--bof-ink); font-size: 1rem; }
.bof-calculator__section-title {
	font-family: var(--bof-font-display);
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	margin: 16px 0 8px;
}
.bof-calculator__ingredient-list { display: flex; flex-direction: column; gap: 6px; }
.bof-calculator__ingredient-list li { font-size: 0.9rem; }
.bof-calculator__ingredient-list label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.bof-calculator__qty-row { display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.bof-calculator__add-btn { margin-top: 16px; width: 100%; text-align: center; justify-content: center; }

/* ---- Meal panel ---- */
/* Capped to match .bof-nutrition-label's own 380px max-width below it --
   without this, the meal column (a wide 1fr grid track) is noticeably
   wider than the Nutrition Totals box inside it, so "Clear All" (flush
   right in the header row above) visually floats past where the
   content actually appears to end. */
.bof-calculator__meal { max-width: 380px; }
.bof-calculator__meal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.bof-calculator__items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.bof-calculator__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--bof-paper);
	border: 1px solid var(--bof-line);
	border-radius: 10px;
}
.bof-calculator__item-name { font-weight: 600; font-size: 0.9rem; }

/* Same width as the Nutrition Totals card below it (.bof-nutrition-label
   is capped at 380px), not stretched across the full meal column. */
.bof-calculator__empty {
	max-width: 380px;
	padding: 12px 16px;
	background: var(--bof-paper);
	border: 1px solid var(--bof-line);
	border-radius: 10px;
	color: var(--bof-stone);
	font-size: 0.85rem;
}
.bof-calculator__remove {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1px solid var(--bof-line);
	background: var(--bof-paper);
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1;
	color: var(--bof-stone);
}
.bof-calculator__remove:hover { background: var(--bof-warn); border-color: var(--bof-warn); color: #fff; }

.bof-calculator__stepper { display: flex; align-items: center; gap: 10px; font-family: var(--bof-font-mono); }
.bof-calculator__stepper button {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--bof-line);
	background: var(--bof-paper);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
.bof-calculator__stepper button:hover { background: var(--bof-primary); color: var(--bof-paper); border-color: var(--bof-primary); }
.bof-calculator__qty { min-width: 1.5em; text-align: center; }

.bof-calculator__dv { color: var(--bof-stone); font-weight: 400; }