/* GridOps Bundles storefront. Inherits theme colours; override via CSS variables. */
.sgb-bundle {
	--sgb-border: color-mix(in srgb, currentColor 25%, transparent);
	--sgb-muted: color-mix(in srgb, currentColor 65%, transparent);
	--sgb-accent: var(--wp--preset--color--primary, currentColor);
	--sgb-ok: var(--sgb-accent);
	--sgb-warn: var(--wp--preset--color--vivid-red, currentColor);
	margin: 1em 0;
}

/* Product themes often lay `form.cart` children out in columns. Bundle slots
	are sequential choices, so keep the form's own children in one full-width
	column while preserving each slot's internal layout. */
.sgb-bundle form.cart.sgb-form {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.sgb-bundle form.cart.sgb-form > .sgb-variable-slot,
.sgb-bundle form.cart.sgb-form > .sgb-mix-slot {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.sgb-stock { font-weight: 600; margin: 0 0 .75em; }
.sgb-out-of-stock { color: var(--sgb-warn); }

.sgb-heading { font-size: 1em; font-weight: 600; margin: 0 0 .5em; padding: 0; text-align: left; }

.sgb-embedded {
	border: 1px solid var(--sgb-border);
	border-radius: .5em;
	padding: clamp(.85em, 2vw, 1.5em);
}
.sgb-embed-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5em 1em; margin-bottom: .75em; }
.sgb-product-title { font-size: 1.25em; margin: 0; }
.sgb-product-link { font-size: .9em; }

.sgb-components { list-style: none; margin: 0 0 1em; padding: 0; }
.sgb-components li { padding: .5em 0; border-bottom: 1px solid var(--sgb-border); }
.sgb-components .sgb-qty { font-variant-numeric: tabular-nums; font-weight: 600; margin-right: .25em; }
.sgb-component { display: flex; align-items: center; gap: .75em; }
.sgb-component-copy { min-width: 0; }
.sgb-component-copy, .sgb-row-name { overflow-wrap: anywhere; }
.sgb-component-image { display: block; width: 4.5em; height: 4.5em; object-fit: cover; border-radius: .25em; flex: 0 0 auto; }

.sgb-picker { border: 0; margin: 0 0 1em; padding: 0; min-width: 0; }
.sgb-message { color: var(--sgb-muted); margin: 0 0 .5em; min-height: 1.4em; }
.sgb-message.sgb-error { color: var(--sgb-warn); }
.sgb-message.sgb-ok { color: var(--sgb-ok); }

.sgb-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: .5em .75em;
	padding: .5em 0;
	border-bottom: 1px solid var(--sgb-border);
}
.sgb-row-selected {
	box-shadow: inset .2em 0 0 var(--sgb-accent);
	background: color-mix(in srgb, var(--sgb-accent) 6%, transparent);
}
.sgb-row-out { opacity: .6; }
.sgb-row-product { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .25em .75em; min-width: 0; }
.sgb-row-product .sgb-component-image { grid-row: 1 / span 2; }
.sgb-row-name { font-weight: 500; }
.sgb-selected-label { grid-column: 2; justify-self: start; white-space: nowrap; font-size: .82em; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; padding: .12em .5em; }
.sgb-row-price { font-variant-numeric: tabular-nums; color: var(--sgb-muted); }
.sgb-row-note { grid-column: 1 / -1; color: var(--sgb-muted); font-size: .9em; }
.sgb-addon { width: 1.35em; height: 1.35em; margin: .5em; accent-color: var(--sgb-accent); cursor: pointer; }
.sgb-addon:disabled { cursor: not-allowed; }
.sgb-addon:focus-visible { outline: 2px solid var(--sgb-accent); outline-offset: 3px; }
.sgb-addon-row .sgb-row-name { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.sgb-addon-row .sgb-row-price { overflow-wrap: anywhere; }

.sgb-variable-slot {
	margin: 0 0 1em;
	padding: clamp(.75em, 2vw, 1em);
	border: 1px solid var(--sgb-border);
	border-radius: .5em;
}
.sgb-variable-slot.sgb-slot-selected {
	box-shadow: inset .2em 0 0 var(--sgb-accent);
}
.sgb-slot-title { margin: 0 0 .65em; font-size: 1em; font-weight: 600; }
.sgb-slot-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75em; }
.sgb-slot-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .35em .75em; min-width: 0; }
.sgb-slot-controls > label:first-child { grid-column: 1 / -1; font-weight: 600; }
.sgb-variation-select { grid-column: 1 / -1; width: 100%; min-height: 2.75em; margin: 0; }
.sgb-variable-slot, .sgb-variation-select, .sgb-slot-quantity { min-width: 0; max-width: 100%; }
.sgb-slot-title, .sgb-slot-meta { overflow-wrap: anywhere; }
.sgb-slot-qty-label { font-size: .9em; font-weight: 600; }
.sgb-slot-quantity { width: 5em; min-height: 2.75em; margin: 0; }
.sgb-slot-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25em 1em; color: var(--sgb-muted); font-size: .9em; }
.sgb-slot-price { font-variant-numeric: tabular-nums; }
.sgb-mix-slot { border: 1px solid var(--sgb-border); border-radius: .5em; padding: .75em; margin: 0 0 1em; min-width: 0; }
.sgb-mix-slot summary { cursor: pointer; font-weight: 600; min-height: 2.75em; overflow-wrap: anywhere; }
.sgb-mix-count { display: inline-block; font-size: .85em; font-weight: 400; margin-inline-start: .5em; }
.sgb-mix-options { max-height: 22em; overflow-y: auto; overscroll-behavior: contain; padding: .2em; }
.sgb-mix-option { display: grid; grid-template-columns: minmax(0, 1fr) 4.5em; align-items: center; gap: .5em; padding: .5em 0; border-bottom: 1px solid var(--sgb-border); }
.sgb-mix-option[hidden], .sgb-mix-search[hidden] { display: none; }
.sgb-mix-option label, .sgb-mix-meta { overflow-wrap: anywhere; }
.sgb-mix-meta { display: block; color: var(--sgb-muted); font-size: .85em; }
.sgb-mix-quantity { width: 100%; max-width: 100%; min-width: 0; min-height: 2.75em; box-sizing: border-box; margin: 0; }
.sgb-mix-search input { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 2.75em; margin: .35em 0; }
.sgb-mix-status { font-size: .9em; margin: .5em 0 0; overflow-wrap: anywhere; }
.sgb-mix-slot summary:focus-visible,
.sgb-mix-quantity:focus-visible,
.sgb-mix-search input:focus-visible,
.sgb-variation-select:focus-visible,
.sgb-slot-quantity:focus-visible { outline: 2px solid var(--sgb-accent); outline-offset: 2px; }

.sgb-stepper { display: inline-flex; align-items: stretch; }
.sgb-stepper .sgb-pick {
	width: 3.5em;
	text-align: center;
	border: 1px solid var(--sgb-border);
	border-left: 0;
	border-right: 0;
	border-radius: 0;
	margin: 0;
	font: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
}
.sgb-stepper .sgb-pick::-webkit-outer-spin-button,
.sgb-stepper .sgb-pick::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sgb-step {
	min-width: 2.5em;
	min-height: 2.5em;
	border: 1px solid var(--sgb-border);
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	padding: 0;
	line-height: 1;
}
.sgb-step:hover:not(:disabled) { background: color-mix(in srgb, currentColor 8%, transparent); }
.sgb-step:disabled { opacity: .4; cursor: not-allowed; }
.sgb-step:focus-visible,
.sgb-pick:focus-visible { outline: 2px solid var(--sgb-accent); outline-offset: 2px; }

.sgb-tiers { width: 100%; border-collapse: collapse; margin: 0 0 .5em; font-variant-numeric: tabular-nums; }
.sgb-tiers caption { caption-side: top; text-align: left; }
.sgb-tiers th, .sgb-tiers td { padding: .4em .5em; border-bottom: 1px solid var(--sgb-border); text-align: left; }
.sgb-tiers thead th { font-weight: 600; }
.sgb-note { color: var(--sgb-muted); font-size: .9em; margin: 0 0 1em; }

.sgb-purchase-summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em 1em; border-top: 1px solid var(--sgb-border); padding-top: .85em; }
.sgb-buy { display: flex; flex-wrap: wrap; align-items: center; gap: .75em; }
.sgb-qty-label { font-weight: 600; }
.sgb-total { font-weight: 600; margin: 0; font-variant-numeric: tabular-nums; }
.sgb-form button[disabled] { opacity: .5; cursor: not-allowed; }

@media (max-width: 480px) {
	.sgb-row { grid-template-columns: minmax(0, 1fr) auto; }
	.sgb-row-product { grid-column: 1 / -1; }
	.sgb-row-price { grid-column: 1; grid-row: 2; margin-left: 4.25em; }
	.sgb-stepper { grid-column: 2; grid-row: 2; }
	.sgb-addon { grid-column: 2; grid-row: 2; }
	.sgb-component-image { width: 3.5em; height: 3.5em; }
	.sgb-buy .single_add_to_cart_button { min-height: 44px; }
	.sgb-purchase-summary { align-items: stretch; }
	.sgb-buy { width: 100%; }
	.sgb-slot-body { grid-template-columns: 1fr; }
	.sgb-variable-slot .sgb-component-image { width: 4.5em; height: 4.5em; }
}

@media (max-width: 782px) {
	.sgb-bundle form.cart.sgb-form .sgb-buy {
		position: sticky;
		bottom: 0;
		z-index: 5;
		padding: .75em 0;
		background: inherit;
	}
	.sgb-bundle .single_add_to_cart_button {
		min-height: 48px;
		width: 100%;
	}
}

/* Chips are a script enhancement. The select stays in the form and is the
   submitted control; this class is added only after the chips exist. */
.sgb-variation-select.sgb-select-enhanced {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sgb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 0;
}

.sgb-chip {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #c3c4c7;
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
	text-align: left;
}

.sgb-chip.is-on {
	background: #111;
	border-color: #111;
	color: #fff;
}

.sgb-chip:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.sgb-chip-meta {
	font-size: 12px;
	font-weight: 400;
}

.sgb-chip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}