/* 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;
}

.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-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-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; }
}