/* ── Growf Bundle — frontend ─────────────────────────────────────────────── */

.growf-bundle__form {
	--gb-radius:  10px;
	--gb-border:  #e5e7eb;
	--gb-muted:   #6b7280;
	--gb-accent:  #6366f1;
	--gb-green:   #16a34a;
	--gb-red:     #dc2626;
	--gb-bg:      #fff;
	--gb-bg-alt:  #f9fafb;
	margin: 0;
}

/* ── Section header ─────────────────────────────────────────────────────── */

.growf-bundle__header {
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gb-muted);
	margin: 0 0 12px;
}

/* ── Items list ─────────────────────────────────────────────────────────── */

.growf-bundle__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}

/* Individual item card */
.growf-bundle__item {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius);
	background: var(--gb-bg);
	transition: border-color .15s;
}

.growf-bundle__item:hover {
	border-color: #d1d5db;
}

.growf-bundle__item--oos {
	opacity: .45;
	pointer-events: none;
}

/* Thumbnail */
.growf-bundle__item-img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}

/* Name + variations + notices */
.growf-bundle__item-body {
	min-width: 0;
}

.growf-bundle__item-name {
	font-weight: 600;
	font-size: .9em;
	margin: 0 0 4px;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Right column: stepper + price */
.growf-bundle__item-foot {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	flex-shrink: 0;
}

/* ── Qty stepper ────────────────────────────────────────────────────────── */

.growf-bundle__stepper {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--gb-border);
	border-radius: 6px;
	overflow: hidden;
	height: 32px;
}

.growf-bundle__step {
	width: 28px;
	height: 32px;
	border: none;
	background: var(--gb-bg-alt);
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	color: #374151;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .12s;
	flex-shrink: 0;
}

.growf-bundle__step:hover:not(:disabled) {
	background: #e5e7eb;
}

.growf-bundle__step:disabled {
	opacity: .35;
	cursor: not-allowed;
}

.growf-bundle__qty {
	width: 36px;
	height: 32px;
	border: none;
	border-left: 1px solid var(--gb-border);
	border-right: 1px solid var(--gb-border);
	text-align: center;
	font-size: .88em;
	font-weight: 600;
	background: var(--gb-bg);
	-moz-appearance: textfield;
}

.growf-bundle__qty::-webkit-outer-spin-button,
.growf-bundle__qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Item unit price */
.growf-bundle__item-price {
	font-size: .82em;
	color: var(--gb-muted);
	white-space: nowrap;
}

/* OOS badge */
.growf-bundle__oos-badge {
	display: inline-block;
	background: #fee2e2;
	color: var(--gb-red);
	border-radius: 4px;
	font-size: .75em;
	font-weight: 600;
	padding: 2px 6px;
}

/* ── Variation selects ──────────────────────────────────────────────────── */

.growf-bundle__variations {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 4px;
}

.growf-bundle__var-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.growf-bundle__var-label {
	font-size: .75em;
	color: var(--gb-muted);
	text-transform: capitalize;
}

.growf-bundle__var-select {
	border: 1px solid var(--gb-border);
	border-radius: 4px;
	padding: 3px 6px;
	font-size: .85em;
	max-width: 140px;
}

/* Validation / OOS notices */
.growf-bundle__var-notice,
.growf-bundle__oos-notice {
	display: none;
	font-size: .78em;
	color: var(--gb-red);
	margin-top: 3px;
}

/* ── Summary bar ────────────────────────────────────────────────────────── */

.growf-bundle__summary {
	background: var(--gb-bg-alt);
	border: 1px solid var(--gb-border);
	border-radius: var(--gb-radius);
	padding: 14px 16px;
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.growf-bundle__total {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
}

.growf-bundle__total-label {
	font-size: .85em;
	color: var(--gb-muted);
}

.growf-bundle__total-price {
	font-size: 1.35em;
	font-weight: 700;
}

.growf-bundle__regular-price {
	font-size: .9em;
	color: var(--gb-muted);
	text-decoration: line-through;
}

.growf-bundle__savings {
	font-size: .82em;
	font-weight: 700;
	color: var(--gb-green);
	background: #dcfce7;
	padding: 2px 8px;
	border-radius: 20px;
}

/* No items notice */
.growf-bundle__empty {
	padding: 16px;
	color: var(--gb-muted);
	font-style: italic;
}

/* AJAX add-to-cart success */
.growf-bundle__success {
	font-size: .9em;
	color: var(--gb-green);
	background: #dcfce7;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	margin: 12px 0 0;
	padding: 12px 14px;
	text-align: center;
	font-weight: 600;
}

.growf-bundle__success a {
	color: var(--gb-green);
	text-decoration: underline;
}

/* AJAX add-to-cart error */
.growf-bundle__error {
	font-size: .85em;
	color: var(--gb-red);
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	margin: 0 0 12px;
	padding: 10px 12px;
	text-align: center;
}

/* Minimum total notice */
.growf-bundle__min-notice {
	font-size: .83em;
	color: var(--gb-muted);
	margin: 0 0 12px;
	padding: 8px 12px;
	background: var(--gb-bg-alt);
	border: 1px solid var(--gb-border);
	border-radius: 6px;
	text-align: center;
}

/* ── Submit button ──────────────────────────────────────────────────────── */

.growf-bundle__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	cursor: pointer;
	font-size: 1em;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 14px 24px;
	border: none;
	border-radius: var(--gb-radius);
	background: var(--gb-accent);
	color: #fff;
	transition: opacity .18s, transform .12s;
}

.growf-bundle__submit:hover {
	opacity: .9;
}

.growf-bundle__submit:active {
	transform: scale(.98);
}

.growf-bundle__submit:disabled {
	opacity: .45;
	cursor: not-allowed;
	transform: none;
}

/* ── Force visible despite CSP's csp-hide-addtocart ────────────────────── */

/* CSP hides all .brxe-product-add-to-cart containers, but our bundle form is
   rendered inside one. Re-show the container on bundle product pages. */
body.product-type-growf_bundle.csp-hide-addtocart .brxe-product-add-to-cart {
	display: block !important;
}

/* Show the form itself (CSP also hides form.cart directly). Use ID specificity
   to beat CSP's !important rule. Reset Bricks' inline flex layout on form.cart
   to a plain block so the bundle column layout renders correctly. */
body.csp-hide-addtocart #growf-bundle-form,
form#growf-bundle-form {
	display: block !important;
	flex-direction: unset;
	flex-wrap: unset;
	justify-content: unset;
	row-gap: unset;
	column-gap: unset;
}

/* CSP's one-page checkout stays VISIBLE on bundle pages so the shopper can choose
   to "Commander" without going through the cart. bundle.js mirrors the live bundle
   selection into CSP's form so its order carries the right config + price.
   But hide the two CSP controls that would add the bundle UNCONFIGURED:
   its own quantity field and its standalone add-to-cart button. The bundle's own
   AJAX "add to cart" button covers that path. */
body.product-type-growf_bundle .csp-quantity-wrapper,
body.product-type-growf_bundle .csp-add-to-cart-btn {
	display: none !important;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
	.growf-bundle__item {
		grid-template-columns: 48px 1fr;
		grid-template-rows: auto auto;
	}

	.growf-bundle__item-foot {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.growf-bundle__item-img {
		width: 48px;
		height: 48px;
	}
}