/*
 * BuyOrBorrow Music: Borrow / Buy intent selector (product page)  v1.2.0
 * Pairs with functions/05_products_and_subscriptions/functions_bob_intent_selector.php
 *
 * Everything is scoped under .bobi so nothing else on the site changes.
 * Exceptions, both at the bottom of this file:
 *   1. Hides the old right-column elements, only on pages where the selector
 *      renders (body:has(.bobi), plus body.bobi-on added by the JS as a fallback).
 *   2. Desktop sticky column rule for .product-details-sticky (replaces the
 *      Breakdance sticky on element 114; applies only when the selector renders).
 *
 * Sizes are the approved prototype values. Mobile first; desktop at 1024px and up.
 */

.bobi {
	--bobi-ink: #111;
	--bobi-text: #2a2a2a;
	--bobi-muted: #5f5f5f;
	--bobi-line: #e3e3df;
	--bobi-surface: #f3f3ef;
	--bobi-teal: #00A89C;
	--bobi-teal-ink: #00756D;
	--bobi-teal-tint: #E4F5F3;
	--bobi-pink: #DB458A;
	--bobi-pink-ink: #B02D6A;
	--bobi-pink-tint: #FCEAF2;
	--bobi-yellow: #FFF50A;
	--bobi-purple: #642EDA;
	--bobi-display: "Bison", Impact, "Arial Narrow", sans-serif;
	--bobi-body: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--bobi-ease: cubic-bezier(.2, .7, .2, 1);
	font-family: var(--bobi-body);
	color: var(--bobi-text);
	font-size: 15px;
	line-height: 1.4;
	width: 100%;
	margin-bottom: 24px;
	-webkit-font-smoothing: antialiased;
}
.bobi *, .bobi *::before, .bobi *::after { box-sizing: border-box; }
.bobi p, .bobi h3, .bobi ul, .bobi li { margin: 0; padding: 0; }
.bobi ul { list-style: none; }
.bobi svg { display: block; flex: none; }
.bobi [hidden] { display: none !important; }

/* Mode colors */
.bobi[data-mode="borrow"] { --mode: var(--bobi-teal); --mode-ink: var(--bobi-teal-ink); --mode-tint: var(--bobi-teal-tint); }
.bobi[data-mode="buy"] { --mode: var(--bobi-pink); --mode-ink: var(--bobi-pink-ink); --mode-tint: var(--bobi-pink-tint); }

/* Button reset. Every button rule below uses two classes (0,2,0) so it beats the
   Hello theme reset (button:hover is 0,1,1). Our markup never uses type="button",
   so Hello's [type=button]:hover (0,2,0) does not apply. */
.bobi .bobi-seg,
.bobi .bobi-chip,
.bobi .bobi-cta,
.bobi .bobi-mbuy__head {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	padding: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.bobi :focus-visible { outline: 3px solid var(--bobi-purple); outline-offset: 2px; }

/* ===================== Visitor: folder tabs ===================== */
.bobi .bobi-sel { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }

.bobi .bobi-seg {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	text-align: left;
	height: 88px;
	padding: 5.4px 13px 0;
	border: 2px solid var(--bobi-ink);
	border-radius: 14px;
	background: #fff;
	transition: background-color .18s var(--bobi-ease), border-color .18s var(--bobi-ease), color .18s var(--bobi-ease);
}
.bobi .bobi-seg--borrow { --c: var(--bobi-teal); --c-ink: var(--bobi-teal-ink); --c-tint: var(--bobi-teal-tint); }
.bobi .bobi-seg--buy { --c: var(--bobi-pink); --c-ink: var(--bobi-pink-ink); --c-tint: var(--bobi-pink-tint); }

.bobi .bobi-seg__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 20px; }
.bobi .bobi-seg__eyebrow { font: italic 700 18px/1 var(--bobi-display); letter-spacing: .03em; text-transform: uppercase; color: var(--c-ink); }
.bobi .bobi-seg__price { display: block; font: italic 700 39px/1 var(--bobi-display); color: var(--bobi-ink); margin-top: 13.5px; letter-spacing: .01em; white-space: nowrap; }
.bobi .bobi-seg__price small { font-size: 18px; letter-spacing: .03em; margin-left: 1px; }
.bobi .bobi-seg__check { display: none; width: 20px; height: 20px; border-radius: 99px; background: var(--c-ink); color: #fff; place-items: center; }
.bobi .bobi-seg__check svg { width: 12px; height: 12px; }
.bobi .bobi-seg[aria-checked="true"] .bobi-seg__check { display: grid; }

/* After a choice: the other tab goes quiet gray */
.bobi[data-mode="borrow"] .bobi-seg,
.bobi[data-mode="buy"] .bobi-seg { background: var(--bobi-surface); border-color: var(--bobi-surface); }
.bobi[data-mode="borrow"] .bobi-seg--buy .bobi-seg__price,
.bobi[data-mode="buy"] .bobi-seg--borrow .bobi-seg__price { color: #3d3d3d; }

/* Selected tab grows 10px and joins the panel (.is-selected = borrow-only static tab) */
.bobi .bobi-seg[aria-checked="true"],
.bobi .bobi-seg.is-selected {
	height: 98px;
	background: var(--c-tint);
	border-color: var(--c);
	border-bottom-width: 0; /* side borders run straight into the panel's, no corner notch */
	border-radius: 14px 14px 0 0;
	margin-bottom: -2px;
	z-index: 2;
}

/* Panel */
.bobi .bobi-panel {
	position: relative;
	background: var(--mode-tint);
	border: 2px solid var(--mode);
	padding: 20px 18px 18px;
}
.bobi[data-mode="borrow"] .bobi-panel { border-radius: 0 14px 14px 14px; }
.bobi[data-mode="buy"] .bobi-panel { border-radius: 14px 0 14px 14px; }
.bobi .bobi-panel > * { animation: bobiFade .22s var(--bobi-ease) both; }
@keyframes bobiFade { from { opacity: 0; } to { opacity: 1; } }

/* Rolled inside corner where the panel turns under the other tab */
.bobi .bobi-panel::before,
.bobi .bobi-panel::after { content: ""; position: absolute; top: -12px; width: 12px; height: 12px; z-index: 3; pointer-events: none; }
.bobi .bobi-panel::before { background: var(--mode-tint); }
.bobi .bobi-panel::after { background: #fff; }
.bobi[data-mode="borrow"] .bobi-panel::before,
.bobi[data-mode="borrow"] .bobi-panel::after { left: calc(50% - 7px); }
.bobi[data-mode="borrow"] .bobi-panel::after { border-left: 2px solid var(--mode); border-bottom: 2px solid var(--mode); border-bottom-left-radius: 12px; }
.bobi[data-mode="buy"] .bobi-panel::before,
.bobi[data-mode="buy"] .bobi-panel::after { right: calc(50% - 7px); }
.bobi[data-mode="buy"] .bobi-panel::after { border-right: 2px solid var(--mode); border-bottom: 2px solid var(--mode); border-bottom-right-radius: 12px; }

/* Borrow-only items (nothing to buy): one full-width Borrow tab, already open */
.bobi--borrow-only .bobi-sel { grid-template-columns: 1fr; }
.bobi--borrow-only .bobi-seg { cursor: default; }
.bobi--borrow-only .bobi-seg.is-selected { height: 88px; }
.bobi--borrow-only[data-mode="borrow"] .bobi-panel { border-radius: 0 0 14px 14px; }
.bobi--borrow-only .bobi-panel::before,
.bobi--borrow-only .bobi-panel::after { display: none; }

/* Borrow panel content */
.bobi .bobi-planline { font: 700 15.5px/1.35 var(--bobi-body); color: var(--bobi-ink); margin: 0 0 14px; }
.bobi .bobi-planname { color: var(--t-ink); }
.bobi .bobi-benefits { display: flex; align-items: center; gap: 10px; margin: 20px 0 12px; font: italic 700 19px/1 var(--bobi-display); letter-spacing: .03em; text-transform: uppercase; color: var(--bobi-ink); }
.bobi .bobi-benefits::after { content: ""; flex: 1; height: 1px; background: rgba(0, 0, 0, .14); }
.bobi .bobi-more { display: inline-block; margin-top: 12px; font: 700 14px/1.2 var(--bobi-body); color: #C85188; text-decoration: none; }
.bobi .bobi-more:hover { text-decoration: underline; }
.bobi .bobi-fee { margin: 10px 0 0; font: 700 14px/1.3 var(--bobi-body); color: var(--bobi-ink); text-align: center; }
.bobi .bobi-foot { font-size: 11.5px; line-height: 1.35; color: var(--bobi-muted); margin: 9px 2px 0; }

/* Perks (plan benefits and the return policy row) */
.bobi .bobi-perks { display: grid; gap: 10px; }
.bobi .bobi-perks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.3; color: var(--bobi-text); }
.bobi .bobi-perks svg { width: 19px; height: 19px; color: var(--bobi-purple); margin-top: -1px; }
.bobi .bobi-perks small { display: block; font-size: 12.5px; color: var(--bobi-muted); }
.bobi .bobi-perks--buy { margin-top: 14px; }

/* Shared yellow CTA (Add to cart) */
.bobi .bobi-cta {
	width: 100%;
	height: 54px;
	border-radius: 10px;
	background: var(--bobi-yellow);
	color: var(--bobi-ink);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font: italic 700 24px/1 var(--bobi-display);
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: transform .12s var(--bobi-ease), filter .12s;
}
.bobi .bobi-cta:active { transform: scale(.985); filter: brightness(.97); }
.bobi .bobi-cta__div { width: 1.5px; height: 20px; background: rgba(0, 0, 0, .35); }

/* ===================== Buy panel: condition chips ===================== */
.bobi .bobi-cond__label { font: 700 12px/1 var(--bobi-body); letter-spacing: .09em; text-transform: uppercase; color: var(--bobi-muted); margin-bottom: 9px; }
.bobi .bobi-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.bobi .bobi-chip {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 50px;
	padding: 8px 12px;
	border: 1.5px solid #cfcfca;
	border-radius: 11px;
	background: #fff;
	text-align: left;
	transition: border-color .15s, background-color .15s;
}
.bobi .bobi-chip__dot { width: 18px; height: 18px; border-radius: 99px; border: 1.5px solid #9a9a95; flex: none; display: grid; place-items: center; }
.bobi .bobi-chip[aria-checked="true"] { border-color: var(--bobi-pink); box-shadow: inset 0 0 0 1px var(--bobi-pink); }
.bobi .bobi-chip[aria-checked="true"] .bobi-chip__dot { border-color: var(--bobi-pink-ink); }
.bobi .bobi-chip[aria-checked="true"] .bobi-chip__dot::after { content: ""; width: 9px; height: 9px; border-radius: 99px; background: var(--bobi-pink-ink); }
.bobi .bobi-chip__txt { display: flex; flex-direction: column; line-height: 1.15; }
.bobi .bobi-chip__name { font-size: 13px; color: var(--bobi-muted); }
.bobi .bobi-chip__price { font: 700 16px/1.15 var(--bobi-body); color: var(--bobi-ink); }
.bobi .bobi-chip__tag { margin-left: auto; align-self: flex-start; font: 700 10px/1 var(--bobi-body); letter-spacing: .06em; text-transform: uppercase; color: var(--bobi-pink-ink); background: #fff; padding: 4px 6px; border-radius: 6px; }
.bobi .bobi-chip--solo { grid-column: 1 / -1; cursor: default; }

/* ===================== Borrow button (output of [magic_product_borrow_list]) =====================
   The theme styles .custom-btn with several !important rules (font-size 13.5px/14px
   on mobile, -25px side margins, transparent hover on .delete_product_borrow_list).
   These overrides are scoped to the selector only. */
.bobi .bobi-bl a.custom-btn,
.bobi .bobi-bl button.custom-btn,
.bobi .bobi-bl .add_to_borrow_list_btn {
	width: 100% !important;
	max-width: none !important;
	height: 54px !important;
	min-height: 0 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 9px;
	margin: 0 !important;
	padding: 0 16px !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: none;
	background: var(--bobi-yellow) !important;
	color: var(--bobi-ink) !important;
	font: italic 700 24px/1 var(--bobi-display) !important;
	letter-spacing: .04em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background-color .18s, box-shadow .18s, color .18s, transform .12s var(--bobi-ease);
}
.bobi .bobi-bl .custom-btn:active { transform: scale(.985); }
.bobi .bobi-bl--visitor a.custom-btn svg,
.bobi .bobi-bl--visitor a.custom-btn img,
.bobi .bobi-bl--visitor button.custom-btn svg,
.bobi .bobi-bl--visitor button.custom-btn img { display: none !important; }

/* Already on the borrow list: turquoise, says Remove */
.bobi .bobi-bl .custom-btn.delete_product_borrow_list,
.bobi .bobi-bl .custom-btn.delete_product_borrow_list_with_plan,
.bobi .bobi-bl .custom-btn.delete_product_borrow_list:hover,
.bobi .bobi-bl .custom-btn.delete_product_borrow_list_with_plan:hover {
	background: var(--bobi-teal-tint) !important;
	color: var(--bobi-teal-ink) !important;
	box-shadow: inset 0 0 0 2px var(--bobi-teal) !important;
}
.bobi .bobi-bl .delete_product_borrow_list svg *,
.bobi .bobi-bl .delete_product_borrow_list_with_plan svg * { fill: var(--bobi-teal-ink) !important; }

/* ===================== Member: stacked actions, Buy folds open ===================== */
.bobi .bobi-mact { display: grid; gap: 12px; margin-top: 2px; }
.bobi .bobi-mborrow .bobi-fee { margin-top: 8px; }

.bobi .bobi-bl--member a.custom-btn,
.bobi .bobi-bl--member button.custom-btn,
.bobi .bobi-bl--member .add_to_borrow_list_btn { border-radius: 999px !important; }
.bobi .bobi-bl--member .custom-btn svg { width: 18px !important; height: 18px !important; }
.bobi .bobi-bl--member .custom-btn img { width: 18px !important; height: auto !important; }

/* While Buy is open, Add to borrow list goes outline so Add to cart is the only yellow button */
.bobi--member[data-mode="buy"] .bobi-bl a.custom-btn:not(.delete_product_borrow_list):not(.delete_product_borrow_list_with_plan),
.bobi--member[data-mode="buy"] .bobi-bl button.custom-btn:not(.delete_product_borrow_list):not(.delete_product_borrow_list_with_plan) {
	background: #fff !important;
	box-shadow: inset 0 0 0 2px var(--bobi-ink) !important;
}

.bobi .bobi-mbuy { border: 2px solid var(--bobi-ink); border-radius: 27px; background: #fff; transition: border-color .2s, background-color .2s; }
.bobi .bobi-mbuy__head {
	width: 100%;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: italic 700 24px/1 var(--bobi-display);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--bobi-ink);
	background: transparent;
	border-radius: 25px;
}
.bobi .bobi-mbuy__head svg { width: 20px; height: 20px; transition: transform .24s var(--bobi-ease); }
.bobi .bobi-mbuy__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--bobi-ease); }
.bobi .bobi-mbuy__in { overflow: hidden; min-height: 0; }
.bobi .bobi-mbuy__pad { padding: 16px; border-top: 1px solid rgba(219, 69, 138, .28); }

.bobi--member[data-mode="buy"] .bobi-mbuy { border-color: var(--bobi-pink); background: var(--bobi-pink-tint); }
.bobi--member[data-mode="buy"] .bobi-mbuy__head { border-radius: 25px 25px 0 0; }
.bobi--member[data-mode="buy"] .bobi-mbuy__head svg { transform: rotate(180deg); }
.bobi--member[data-mode="buy"] .bobi-mbuy__body { grid-template-rows: 1fr; }
.bobi--member .bobi-cta { border-radius: 999px; }

/* Member whose plan is below this item (kept from today's page) */
.bobi .bobi-upgrade { margin: 12px 2px 0; font-size: 13.5px; line-height: 1.35; color: var(--bobi-text); }
.bobi .bobi-upgrade a { font-weight: 700; color: #C85188; text-decoration: none; }
.bobi .bobi-upgrade a:hover { text-decoration: underline; }

/* ===================== Mobile sticky action bar ===================== */
.bobi-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid #e3e3df;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
	transform: translateY(110%);
	transition: transform .22s cubic-bezier(.2, .7, .2, 1);
	font-family: "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
.bobi-bar.is-on { transform: none; }
.bobi-bar[data-mode="borrow"] { --mode-ink: #00756D; }
.bobi-bar[data-mode="buy"] { --mode-ink: #B02D6A; }
.bobi-bar .bobi-bar__txt { flex: 1; min-width: 0; line-height: 1.2; }
.bobi-bar .bobi-bar__mode { font: 700 11px/1 "Proxima Nova", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mode-ink); }
.bobi-bar .bobi-bar__price { font: italic 700 24px/1.05 "Bison", Impact, sans-serif; color: #111; white-space: nowrap; }
.bobi-bar .bobi-bar__price small { font-size: 13px; letter-spacing: .03em; }
.bobi-bar .bobi-bar__cta {
	-webkit-appearance: none;
	appearance: none;
	flex: none;
	width: auto;
	height: 46px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: #FFF50A;
	color: #111;
	box-shadow: none;
	display: flex;
	align-items: center;
	font: italic 700 20px/1 "Bison", Impact, sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}
.bobi-bar.is-member .bobi-bar__cta { border-radius: 999px; }
.bobi-bar .bobi-bar__cta.is-listed { background: #E4F5F3; color: #00756D; box-shadow: inset 0 0 0 2px #00A89C; }
@media (min-width: 768px) { .bobi-bar { display: none !important; } }

/* While the bar is up, lift the HubSpot chat bubble so it does not cover the bar's button */
html.bobi-bar-on #hubspot-messages-iframe-container { bottom: var(--bobi-bar-h, 67px) !important; transition: bottom .22s cubic-bezier(.2, .7, .2, 1); }

/* ===================== Small phones (370px and under) ===================== */
@media (max-width: 370px) {
	.bobi .bobi-seg { padding: 5.7px 11px 0; }
	.bobi .bobi-seg__price { font-size: 34px; margin-top: 17.5px; }
	.bobi .bobi-seg__price small { font-size: 16px; }
	.bobi .bobi-seg__eyebrow { font-size: 17px; }
	.bobi .bobi-cta,
	.bobi .bobi-mbuy__head { font-size: 22px; }
	.bobi .bobi-bl a.custom-btn,
	.bobi .bobi-bl button.custom-btn { font-size: 22px !important; }
	.bobi .bobi-chip { padding: 8px 10px; gap: 7px; }
	.bobi .bobi-chip__tag { display: none; }
	.bobi .bobi-mbuy__pad { padding: 14px 13px; }
}

/* ===================== Desktop (1024px and up) ===================== */
@media (min-width: 1024px) {
	.bobi .bobi-seg { height: 100px; padding: 7.2px 18px 0; }
	.bobi .bobi-seg[aria-checked="true"],
	.bobi .bobi-seg.is-selected { height: 110px; }
	.bobi--borrow-only .bobi-seg.is-selected { height: 100px; }
	.bobi .bobi-seg__top { height: 22px; }
	.bobi .bobi-seg__eyebrow { font-size: 22px; }
	.bobi .bobi-seg__price { font-size: 46px; margin-top: 13.4px; }
	.bobi .bobi-seg__price small { font-size: 20px; }
	.bobi .bobi-seg__check { width: 22px; height: 22px; }
	.bobi .bobi-panel { padding: 24px 24px 22px; }
	.bobi .bobi-cta { height: 56px; font-size: 25px; }
	.bobi .bobi-bl a.custom-btn,
	.bobi .bobi-bl button.custom-btn { height: 56px !important; font-size: 25px !important; }
	.bobi .bobi-planline { font-size: 17px; margin-bottom: 16px; }
	.bobi .bobi-perks li { font-size: 15px; }
	.bobi .bobi-chip { min-height: 56px; padding: 9px 14px; }
	.bobi .bobi-foot { font-size: 12.5px; margin-top: 10px; }

	.bobi .bobi-mbuy { border-radius: 28px; }
	.bobi .bobi-mbuy__head { height: 52px; font-size: 25px; border-radius: 26px; }
	.bobi--member[data-mode="buy"] .bobi-mbuy__head { border-radius: 26px 26px 0 0; }
	.bobi .bobi-mbuy__pad { padding: 20px 24px 22px; }
}
@media (min-width: 1024px) and (hover: hover) {
	.bobi[data-mode="initial"] .bobi-seg:hover { background: #f7f7f3; }
	.bobi[data-mode="borrow"] .bobi-seg:not([aria-checked="true"]):not(.is-selected):hover,
	.bobi[data-mode="buy"] .bobi-seg:not([aria-checked="true"]):not(.is-selected):hover { background: #e9e9e3; border-color: #e9e9e3; }
	.bobi .bobi-cta:hover { filter: brightness(.96); }
	.bobi .bobi-bl a.custom-btn:hover,
	.bobi .bobi-bl button.custom-btn:hover { filter: brightness(.96); }
	.bobi--member[data-mode="buy"] .bobi-bl .custom-btn:not(.delete_product_borrow_list):not(.delete_product_borrow_list_with_plan):hover { background: rgba(0, 0, 0, .035) !important; filter: none; }
	.bobi .bobi-bl .custom-btn.delete_product_borrow_list:hover,
	.bobi .bobi-bl .custom-btn.delete_product_borrow_list_with_plan:hover { background: #d3eeeb !important; filter: none; }
	.bobi .bobi-mbuy__head:hover { background-color: rgba(0, 0, 0, .035); }
	.bobi--member[data-mode="buy"] .bobi-mbuy__head:hover { background-color: rgba(219, 69, 138, .07); }
	.bobi .bobi-chip:not([aria-checked="true"]):not(.bobi-chip--solo):hover { border-color: #9a9a94; }
}

@media (prefers-reduced-motion: reduce) {
	.bobi .bobi-seg, .bobi .bobi-mbuy, .bobi .bobi-mbuy__body, .bobi .bobi-mbuy__head svg, .bobi .bobi-cta, .bobi .bobi-bl .custom-btn, .bobi-bar { transition: none !important; }
	.bobi .bobi-panel > * { animation: none; }
}

/* ===================== Page-level rules ===================== */

/* 1. When the selector renders, hide the old right-column elements it replaces.
      They stay in the DOM (element 119's inline script still fills the shipping
      line in 117 and the fee we copy). Flag off, or a product that is not a fit,
      = no .bobi on the page, so these rules never match.
      Two separate rules on purpose: a browser without :has() drops only the
      first one and uses body.bobi-on (added by the JS). */
body:has(.bobi) .bde-shortcode-44255-118,
body:has(.bobi) .bde-shortcode-44255-119,
body:has(.bobi) .bde-div-44255-120,
body:has(.bobi) .bde-div-44255-122,
body:has(.bobi) .bde-div-44255-128 { display: none !important; }
body.bobi-on .bde-shortcode-44255-118,
body.bobi-on .bde-shortcode-44255-119,
body.bobi-on .bde-div-44255-120,
body.bobi-on .bde-div-44255-122,
body.bobi-on .bde-div-44255-128 { display: none !important; }

/* 2. Desktop sticky column. Replaces the Breakdance sticky (GSAP pin) on
      element 114, which locks the pinned height at page load and lets a taller
      panel spill over the plans section and footer. Plain CSS sticky stays
      inside column 113, so it can never cover the content below.
      The JS lowers --bobi-pin-top when the column is taller than the screen,
      so it pins by its bottom edge and Add to cart stays visible.
      Two columns run from 768px up on the live template. */
@media (min-width: 768px) {
	body.single-product:has(.bobi) .product-details-sticky,
    body.single-product.bobi-on .product-details-sticky {
		position: sticky;
		top: var(--bobi-pin-top, 10px);
		align-self: flex-start;
	}
}