/* Berry Sticky Cart — sticky bar + toast.
   Colors are set in WooCommerce → Sticky Cart (these are just fallbacks). */
:root {
	--bsc-accent: #e8993e;   /* Add to Cart (matches the header orange) */
	--bsc-primary: #e2365f;  /* Buy Now */
}

.bsc-sticky-bar {
	display: none; /* mobile only — see media query */
}

.bsc-sticky-btn {
	flex: 1 1 0;
	min-height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 2px solid transparent;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.2px;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.bsc-sticky-add {
	background: #fff;
	color: var(--bsc-accent);
	border-color: var(--bsc-accent);
}

.bsc-sticky-buy {
	background: var(--bsc-primary);
	color: #fff;
	border-color: var(--bsc-primary);
}

.bsc-sticky-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (max-width: 768px) {
	.bsc-sticky-bar {
		display: flex;
		gap: 10px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99990;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.14);
	}

	/* keep the footer/content from hiding behind the bar */
	body.bsc-has-sticky {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}

/* Toast (shown on desktop too, since the normal button also stays on page) */
.bsc-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 99999;
	max-width: 92%;
	padding: 12px 16px;
	border-radius: 8px;
	background: #2e7d32;
	color: #fff;
	font-size: 14px;
	line-height: 1.35;
	text-align: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.bsc-toast a {
	margin-left: 10px;
	color: #fff;
	font-weight: 700;
	text-decoration: underline;
}

.bsc-toast-error {
	background: #c62828;
}

.bsc-toast.bsc-toast-show {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

@media (max-width: 768px) {
	body.bsc-has-sticky .bsc-toast {
		bottom: calc(86px + env(safe-area-inset-bottom, 0px));
	}
}

/* ==================================================================== */
/* Bottom sheet (mobile): the real product form, slid up from the bottom */
/* ==================================================================== */

#bsc-overlay {
	display: none;
}

.bsc-chips {
	display: none; /* chips only exist visually inside the mobile sheet */
}

@keyframes bsc-up {
	from { transform: translateY(40px); opacity: 0.4; }
	to   { transform: translateY(0); opacity: 1; }
}

@keyframes bsc-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

@media (max-width: 768px) {

	/* Closed: the page keeps its photos/details. Only the option parts (grades, quantity,
	   the theme's own button) are tucked away — they stay in the DOM so WooCommerce/WAPF keep working. */
	body.bsc-sheet-mode form.cart:not(.bsc-open) .bsc-keep {
		position: absolute !important;
		left: -9999px !important;
		top: 0 !important;
		width: 1px !important;
		height: 1px !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
	}
	body.bsc-sheet-mode form.cart .single_add_to_cart_button {
		display: none !important;
	}

	#bsc-overlay.bsc-overlay-show {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 99997;
		background: rgba(0, 0, 0, 0.5);
	}

	body.bsc-sheet-open {
		overflow: hidden !important;
	}

	/* Open: the form becomes the bottom sheet. */
	body.bsc-sheet-mode form.cart.bsc-open {
		display: block !important;
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		z-index: 99998;
		width: 100% !important;
		max-width: 100% !important;
		max-height: 88vh;
		margin: 0 !important;
		padding: 0 16px !important;
		box-sizing: border-box;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: #fff;
		color: #222;
		border: 0 !important;
		border-radius: 16px 16px 0 0;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
		animation: bsc-up 0.22s ease-out;
	}

	/* While open: only the option parts show; theme columns/floats are flattened so nothing overflows sideways. */
	body.bsc-sheet-mode form.cart.bsc-open .bsc-hide {
		display: none !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open {
		overflow-x: hidden !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open .bsc-keep-path,
	body.bsc-sheet-mode form.cart.bsc-open .bsc-keep:not(.quantity) {
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		transform: none !important;
		box-sizing: border-box !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open .quantity {
		max-width: 100% !important;
	}
	/* Theme / WAPF sometimes lay fields out in side-by-side columns. Inside the sheet: one column, full width. */
	body.bsc-sheet-mode form.cart.bsc-open .wapf-wrapper,
	body.bsc-sheet-mode form.cart.bsc-open .wapf-field-group,
	body.bsc-sheet-mode form.cart.bsc-open .wapf-field-container,
	body.bsc-sheet-mode form.cart.bsc-open .wapf-field-input,
	body.bsc-sheet-mode form.cart.bsc-open .wapf-field-label,
	body.bsc-sheet-mode form.cart.bsc-open .wapf-input-label,
	body.bsc-sheet-mode form.cart.bsc-open table.variations td.value {
		display: block !important;
		float: none !important;
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		transform: none !important;
		box-sizing: border-box !important;
		text-align: left !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open .bsc-keep * {
		max-width: 100%;
		box-sizing: border-box;
	}
	body.bsc-sheet-mode form.cart.bsc-open .bsc-chips {
		width: 100% !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open {
		direction: ltr !important;
		min-width: 0 !important;
	}

	.bsc-spacer {
		display: block;
		width: 100%;
	}

	/* Header: image / price / current selection / close */
	.bsc-sheet-head {
		display: none;
	}
	body.bsc-sheet-mode form.cart.bsc-open .bsc-sheet-head {
		display: flex;
		gap: 12px;
		align-items: flex-end;
		position: relative;
		padding: 16px 32px 12px 0;
		margin-bottom: 12px;
		border-bottom: 1px solid #eee;
	}
	.bsc-sheet-img {
		width: 88px;
		height: 88px;
		flex: 0 0 88px;
		object-fit: cover;
		border-radius: 8px;
		background: #f3f3f3;
	}
	.bsc-sheet-info {
		min-width: 0;
	}
	.bsc-sheet-price,
	.bsc-sheet-price .amount {
		font-size: 22px;
		font-weight: 700;
		color: var(--bsc-primary);
	}
	.bsc-sheet-price del,
	.bsc-sheet-price del .amount {
		font-size: 13px;
		font-weight: 400;
		color: #999;
	}
	.bsc-sheet-price ins {
		text-decoration: none;
	}
	.bsc-sheet-sub {
		margin-top: 4px;
		font-size: 13px;
		color: #777;
	}
	.bsc-sheet-close {
		position: absolute;
		top: 8px;
		right: 0;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		background: transparent;
		color: #555;
		font-size: 28px;
		line-height: 1;
		cursor: pointer;
	}

	/* Variation table → stacked blocks */
	body.bsc-sheet-mode form.cart.bsc-open table.variations,
	body.bsc-sheet-mode form.cart.bsc-open table.variations tbody,
	body.bsc-sheet-mode form.cart.bsc-open table.variations tr,
	body.bsc-sheet-mode form.cart.bsc-open table.variations th,
	body.bsc-sheet-mode form.cart.bsc-open table.variations td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		border: 0 !important;
		text-align: left !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open table.variations {
		margin: 0 0 8px !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open table.variations th.label,
	body.bsc-sheet-mode form.cart.bsc-open table.variations th.label label,
	body.bsc-sheet-mode form.cart.bsc-open .wapf-field-label label {
		margin: 8px 0 10px !important;
		font-size: 15px;
		font-weight: 600;
		color: #222;
	}
	body.bsc-sheet-mode form.cart.bsc-open .reset_variations,
	body.bsc-sheet-mode form.cart.bsc-open .woocommerce-variation-price,
	body.bsc-sheet-mode form.cart.bsc-open .single_add_to_cart_button {
		display: none !important;
	}

	/* The real dropdowns stay in the DOM (for WooCommerce/WAPF) but are replaced visually by chips. */
	body.bsc-sheet-mode form.cart select.bsc-native {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		opacity: 0 !important;
		pointer-events: none !important;
		clip: rect(0 0 0 0) !important;
		overflow: hidden !important;
	}
	body.bsc-sheet-mode form.cart select.bsc-native ~ .nice-select,
	body.bsc-sheet-mode form.cart select.bsc-native ~ .select2,
	body.bsc-sheet-mode form.cart select.bsc-native ~ .select2-container {
		display: none !important;
	}

	/* Chips */
	body.bsc-sheet-mode form.cart .bsc-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin: 0 0 6px;
	}
	.bsc-chip {
		min-width: 64px;
		margin: 0;
		padding: 11px 12px;
		border: 1.5px solid transparent;
		border-radius: 8px;
		background: #f3f3f3;
		color: #222;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.1;
		text-align: center;
		text-transform: none;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.bsc-chip.bsc-chip-wide {
		flex: 1 1 100%;
	}
	.bsc-chip.is-selected {
		background: #fff;
		border-color: var(--bsc-primary);
		color: var(--bsc-primary);
		font-weight: 600;
	}
	.bsc-chip.is-out {
		color: #b5b5b5;
		pointer-events: none;
	}
	.bsc-chips.bsc-missing {
		outline: 2px solid #c62828;
		outline-offset: 4px;
		border-radius: 8px;
		animation: bsc-shake 0.3s;
	}

	/* Quantity row */
	body.bsc-sheet-mode form.cart.bsc-open .quantity {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		margin: 14px 0 !important;
		padding-top: 12px;
		border-top: 1px solid #eee;
		float: none !important;
	}
	body.bsc-sheet-mode form.cart.bsc-open .quantity::before {
		content: "Quantity";
		font-size: 15px;
		font-weight: 600;
		color: #222;
	}

	/* Confirm button pinned to the bottom of the sheet */
	.bsc-sheet-foot {
		display: none;
	}
	body.bsc-sheet-mode form.cart.bsc-open .bsc-sheet-foot {
		display: block;
		position: sticky;
		bottom: 0;
		z-index: 2;
		margin: 12px -16px 0;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid #eee;
	}
	.bsc-confirm {
		display: block;
		width: 100%;
		min-height: 48px;
		margin: 0;
		border: 0;
		border-radius: 8px;
		background: var(--bsc-primary);
		color: #fff;
		font-size: 16px;
		font-weight: 700;
		cursor: pointer;
	}
	.bsc-confirm:disabled {
		opacity: 0.6;
	}

	/* Toast sits above the sheet's confirm button */
	body.bsc-sheet-open .bsc-toast {
		bottom: calc(88px + env(safe-area-inset-bottom, 0px));
	}
}


/* ==================================================================== */
/* Grade chips directly on the product page (desktop / any width)         */
/* ==================================================================== */

body.bsc-chips-mode form.cart .bsc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin: 4px 0 8px;
}

/* The real dropdowns stay in the DOM (WooCommerce/WAPF need them) but chips replace them visually. */
body.bsc-chips-mode form.cart select.bsc-native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	clip: rect(0 0 0 0) !important;
	overflow: hidden !important;
}
body.bsc-chips-mode form.cart select.bsc-native ~ .nice-select,
body.bsc-chips-mode form.cart select.bsc-native ~ .select2,
body.bsc-chips-mode form.cart select.bsc-native ~ .select2-container {
	display: none !important;
}

.bsc-chip {
	min-width: 64px;
	margin: 0;
	padding: 11px 14px;
	border: 1.5px solid transparent;
	border-radius: 8px;
	background: #f3f3f3;
	color: #222;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.bsc-chip:hover {
	background: #ebebeb;
}
.bsc-chip.bsc-chip-wide {
	flex: 1 1 100%;
}
.bsc-chip.is-selected {
	background: #fff;
	border-color: var(--bsc-primary);
	color: var(--bsc-primary);
	font-weight: 600;
}
.bsc-chip.is-out {
	color: #b5b5b5;
	pointer-events: none;
}
.bsc-chips.bsc-missing {
	outline: 2px solid #c62828;
	outline-offset: 4px;
	border-radius: 8px;
	animation: bsc-shake 0.3s;
}