.sytec-pack-commercial {
	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	padding: var(--sytec-pack-padding, 20px);
	border-width: var(--sytec-pack-border-width, 1px);
	border-style: var(--sytec-pack-border-style, solid);
	border-color: var(--sytec-pack-border-color, #dcdcde);
	border-radius: var(--sytec-pack-radius, 4px);
	background: var(--sytec-pack-bg, #fff);
	color: var(--sytec-pack-counter-color, #1d2327);
	font-family: var(--sytec-pack-font-family, inherit);
}

.sytec-pack-commercial *,
.sytec-pack-commercial *::before,
.sytec-pack-commercial *::after {
	box-sizing: border-box;
}

.sytec-pack-commercial [hidden] {
	display: none !important;
}

.sytec-pack-commercial__header {
	display: grid;
	grid-template-columns: minmax(150px, 24%) minmax(0, 1fr);
	gap: clamp(16px, 3%, 32px);
	align-items: center;
	margin-bottom: var(--sytec-pack-group-gap, 20px);
}

.sytec-pack-commercial__header-content {
	min-width: 0;
}

.sytec-pack-commercial.hides-header-image .sytec-pack-commercial__header {
	grid-template-columns: minmax(0, 1fr);
}

.sytec-pack-commercial__hero {
	display: grid;
	min-height: 150px;
	place-items: center;
	overflow: hidden;
	border-radius: var(--sytec-pack-image-radius, 4px);
	background: linear-gradient(145deg, var(--sytec-pack-image-bg, #f6f7f7), #dbeafe 55%, #bfdbfe);
	color: var(--sytec-pack-item-selected-border, #2271b1);
	font-size: clamp(24px, 4cqi, 48px);
	font-weight: 700;
	letter-spacing: -.05em;
}

.sytec-pack-commercial__hero img,
.sytec-pack-commercial__item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--sytec-pack-image-fit, contain);
}

.sytec-pack-commercial__eyebrow,
.sytec-pack-commercial__meta,
.sytec-pack-commercial__description,
.sytec-pack-commercial__item-content p,
.sytec-pack-commercial__status {
	margin: 0;
}

.sytec-pack-commercial__eyebrow {
	margin-bottom: 5px;
	color: var(--sytec-pack-item-selected-border, #2271b1);
	font-size: var(--sytec-pack-help-size, 12px);
	font-weight: 700;
	letter-spacing: .08em;
}

.sytec-pack-commercial__header h2,
.sytec-pack-commercial__header h3 {
	margin: 0 0 8px;
	font-size: clamp(22px, 3cqi, 34px);
	line-height: 1.1;
}

.sytec-pack-commercial__description {
	max-width: 68ch;
	line-height: 1.5;
}

.sytec-pack-commercial__meta {
	margin-top: 9px;
	color: #646970;
	font-size: var(--sytec-pack-help-size, 12px);
}

.sytec-pack-commercial__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 30%);
	gap: var(--sytec-pack-group-gap, 20px);
	align-items: start;
}

.sytec-pack-commercial.is-summary-bottom .sytec-pack-commercial__body {
	grid-template-columns: minmax(0, 1fr);
}

.sytec-pack-commercial__catalog {
	min-width: 0;
}

.sytec-pack-commercial--preview .sytec-pack-commercial__group,
.sytec-pack-commercial--preview .sytec-pack-selector__groups {
	min-width: 0;
}

.sytec-pack-commercial--preview .sytec-pack-commercial__catalog {
	display: block;
	min-width: 0;
}

.sytec-pack-commercial--preview [data-sytec-preview-catalog-grid] {
	display: grid;
	grid-template-columns: repeat(var(--sytec-commercial-columns, 1), minmax(0, 1fr));
	gap: var(--sytec-commercial-gap, 12px);
	align-items: var(--sytec-commercial-alignment, stretch);
	min-width: 0;
}

.sytec-pack-commercial__item {
	display: grid;
	grid-template-columns: var(--sytec-pack-item-image-size, 64px) minmax(0, 1fr) auto;
	grid-template-areas: "image content quantity";
	gap: var(--sytec-pack-item-gap, 12px);
	align-items: center;
	min-width: 0;
	padding: var(--sytec-pack-item-padding, 12px);
	border: 1px solid var(--sytec-pack-item-border, #dcdcde);
	border-radius: var(--sytec-pack-item-radius, 4px);
	background: var(--sytec-pack-item-bg, #fff);
	transition: border-color .15s ease, background-color .15s ease, opacity .15s ease;
}

.sytec-pack-commercial__item.is-selected {
	border-color: var(--sytec-pack-item-selected-border, #2271b1);
	background: var(--sytec-pack-item-selected-bg, #f0f6fc);
}

.sytec-pack-commercial[data-layout-mode="compact"] .sytec-pack-commercial__item {
	grid-template-columns: minmax(48px, calc(var(--sytec-pack-item-image-size, 64px) * .8)) minmax(0, 1fr) auto;
	padding: max(7px, calc(var(--sytec-pack-item-padding, 12px) * .75));
}

.sytec-pack-commercial[data-layout-mode="vertical"] .sytec-pack-commercial__item {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "image" "content" "quantity";
	align-items: var(--sytec-commercial-alignment, stretch);
}

.sytec-pack-commercial[data-layout-mode="vertical"] .sytec-pack-commercial__item-image {
	width: 100%;
	min-height: 110px;
}

.sytec-pack-commercial__item-image {
	grid-area: image;
	display: var(--sytec-commercial-display-image, grid);
	width: var(--sytec-pack-item-image-size, 64px);
	min-height: var(--sytec-pack-item-image-size, 64px);
	place-items: center;
	overflow: hidden;
	border-radius: var(--sytec-pack-image-radius, 4px);
	background: var(--sytec-pack-image-bg, #f6f7f7);
	color: #50575e;
	font-size: var(--sytec-pack-help-size, 12px);
	font-weight: 600;
}

.sytec-pack-commercial__item-content {
	grid-area: content;
	min-width: 0;
}

.sytec-pack-commercial__item-content h4 {
	display: var(--sytec-commercial-display-title, block);
	margin: 0 0 4px;
	font-size: var(--sytec-pack-product-name-size, 14px);
	line-height: 1.25;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

.sytec-pack-commercial__item-price {
	font-weight: 700;
}

.sytec-pack-commercial__item-price del {
	margin-inline-end: 0.35em;
	opacity: 0.62;
	font-size: 0.88em;
	font-weight: 400;
}

.sytec-pack-commercial__item-price ins {
	font-weight: 700;
	text-decoration: none;
}

.sytec-pack-commercial__item-stock {
	margin-top: 3px !important;
	color: var(--sytec-pack-complete-color, #00a32a);
	font-size: var(--sytec-pack-help-size, 12px);
}

.sytec-pack-commercial__quantity {
	grid-area: quantity;
	display: var(--sytec-commercial-display-quantity, grid);
	grid-template-columns: var(--sytec-pack-qty-size, 32px) minmax(24px, auto) var(--sytec-pack-qty-size, 32px);
	align-items: center;
	text-align: center;
}

.sytec-pack-commercial__quantity button {
	width: var(--sytec-pack-qty-size, 32px);
	height: var(--sytec-pack-qty-size, 32px);
	padding: 0;
	border: 0;
	border-radius: var(--sytec-pack-qty-radius, 4px);
	background: var(--sytec-pack-button-bg, #2271b1);
	color: var(--sytec-pack-button-text, #fff);
	font: inherit;
}

.sytec-pack-commercial__quantity strong,
.sytec-pack-commercial__quantity output {
	font-size: var(--sytec-pack-quantity-value-size, 14px);
}

.sytec-pack-commercial__summary {
	min-width: 0;
	padding: max(14px, var(--sytec-pack-item-padding, 12px));
	border: 1px solid var(--sytec-pack-item-border, #dcdcde);
	border-radius: var(--sytec-pack-item-radius, 4px);
	background: var(--sytec-pack-item-bg, #fff);
}

.sytec-pack-commercial.is-summary-sticky .sytec-pack-commercial__summary {
	position: sticky;
	top: var(--sytec-commercial-summary-sticky-top, 24px);
}

.sytec-pack-commercial__summary h4 {
	margin: 0 0 12px;
	font-size: var(--sytec-pack-group-title-size, 18px);
	font-weight: var(--sytec-pack-group-title-weight, 600);
}

.sytec-pack-commercial__summary h3 {
	margin: 0 0 12px;
	font-size: var(--sytec-pack-group-title-size, 18px);
	font-weight: var(--sytec-pack-group-title-weight, 600);
}

.sytec-pack-commercial__summary dl {
	margin: 0;
}

.sytec-pack-commercial__summary dl > div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding-block: 8px;
	border-bottom: 1px solid var(--sytec-pack-item-border, #dcdcde);
}

.sytec-pack-commercial__summary dt,
.sytec-pack-commercial__summary dd {
	margin: 0;
}

.sytec-pack-commercial__summary dd {
	font-weight: 700;
}

.sytec-pack-commercial__status {
	margin-block: 12px;
	color: var(--sytec-pack-complete-color, #00a32a);
	font-size: var(--sytec-pack-help-size, 12px);
}

.sytec-pack-commercial__submit {
	display: inline-grid;
	grid-auto-flow: column;
	width: 100%;
	min-height: var(--sytec-pack-button-height, 40px);
	place-items: center;
	justify-content: center;
	padding: var(--sytec-pack-button-padding-y, 10px) var(--sytec-pack-button-padding-x, 20px);
	border: 1px solid var(--sytec-pack-button-primary-border, #2271b1);
	border-radius: var(--sytec-pack-button-radius, 4px);
	background: var(--sytec-pack-button-primary-bg, #2271b1);
	color: var(--sytec-pack-button-primary-color, #fff);
	font: inherit;
	font-size: var(--sytec-pack-button-font-size, 14px);
	font-weight: var(--sytec-pack-button-font-weight, 600);
}

.sytec-pack-commercial__mobile-bar {
	position: static;
	right: 0;
	bottom: var(--sytec-commercial-mobile-offset, 0px);
	left: 0;
	display: none;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sytec-pack-mobile-buy-gap, 12px);
	align-items: center;
	margin: 16px calc(var(--sytec-pack-padding, 20px) * -1) calc(var(--sytec-pack-padding, 20px) * -1);
	padding: var(--sytec-pack-mobile-buy-padding-y, 10px) max(var(--sytec-pack-mobile-buy-padding-x, 12px), env(safe-area-inset-right)) calc(var(--sytec-pack-mobile-buy-padding-y, 10px) + env(safe-area-inset-bottom)) max(var(--sytec-pack-mobile-buy-padding-x, 12px), env(safe-area-inset-left));
	border-top: 1px solid var(--sytec-pack-item-border, #dcdcde);
	background: var(--sytec-pack-mobile-buy-bg, #fff);
	box-shadow: 0 -6px 18px rgb(0 0 0 / 8%);
	z-index: 5;
}

.sytec-pack-commercial.is-mobile-bar-sticky .sytec-pack-commercial__mobile-bar,
.sytec-pack-commercial__mobile-bar.is-mobile-bar-sticky {
	position: sticky;
}

/* Keep the Pack CTA above the theme's configured mobile navigation. */
body.sytec-mobile-bottom-nav-active .sytec-pack-commercial.is-mobile-bar-sticky .sytec-pack-commercial__mobile-bar {
	bottom: max(
		var(--sytec-commercial-mobile-offset, 0px),
		calc(var(--sytec-mobile-nav-reserved-height, 64px) + env(safe-area-inset-bottom, 0px))
	);
}

.sytec-pack-commercial__mobile-bar[hidden] {
	display: none !important;
}

.sytec-pack-commercial__mobile-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sytec-pack-commercial__mobile-count,
.sytec-pack-commercial__mobile-price {
	min-width: 0;
	overflow-wrap: anywhere;
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__mobile-count,
.sytec-pack-commercial--preview .sytec-pack-commercial__mobile-count,
[data-global-mobile-buy-preview] .sytec-pack-commercial__mobile-count {
	color: var(--sytec-pack-mobile-buy-info-color, #50575e);
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__mobile-price,
.sytec-pack-commercial--preview .sytec-pack-commercial__mobile-price,
[data-global-mobile-buy-preview] .sytec-pack-commercial__mobile-price {
	color: var(--sytec-pack-mobile-buy-price-color, #1d2327);
}

.sytec-pack-commercial__mobile-submit {
	width: auto;
	min-width: 0;
	min-height: var(--sytec-pack-button-height, 40px);
	justify-self: end;
	padding: var(--sytec-pack-button-padding-y, 10px) var(--sytec-pack-button-padding-x, 20px);
	border: 1px solid var(--sytec-pack-button-primary-border, #2271b1);
	border-radius: var(--sytec-pack-button-radius, 4px);
	background: var(--sytec-pack-button-primary-bg, #2271b1);
	color: var(--sytec-pack-button-primary-color, #fff);
	overflow-wrap: anywhere;
	white-space: normal;
}

.sytec-pack-commercial.is-mobile-bar-full-width .sytec-pack-commercial__mobile-bar,
.sytec-pack-commercial__mobile-bar.is-mobile-bar-full-width {
	grid-template-columns: minmax(0, 1fr);
}

.sytec-pack-commercial.is-mobile-bar-full-width .sytec-pack-commercial__mobile-info,
.sytec-pack-commercial__mobile-bar.is-mobile-bar-full-width .sytec-pack-commercial__mobile-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--sytec-pack-mobile-buy-gap, 12px);
}

.sytec-pack-commercial.is-mobile-bar-full-width .sytec-pack-commercial__mobile-submit,
.sytec-pack-commercial__mobile-bar.is-mobile-bar-full-width .sytec-pack-commercial__mobile-submit {
	width: 100%;
	justify-self: stretch;
}

@container (max-width: 700px) {
	.sytec-pack-commercial__header,
	.sytec-pack-commercial__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.sytec-pack-commercial__hero {
		min-height: 120px;
	}

	.sytec-pack-commercial.is-summary-sticky .sytec-pack-commercial__summary {
		position: static;
	}
}

@container (max-width: 460px) {
	.sytec-pack-commercial {
		padding: max(12px, calc(var(--sytec-pack-padding, 20px) * .7));
	}

	.sytec-pack-commercial--preview [data-sytec-preview-catalog-grid] {
		grid-template-columns: repeat(var(--sytec-commercial-columns, 1), minmax(0, 1fr));
	}

	.sytec-pack-commercial__item,
	.sytec-pack-commercial[data-layout-mode="compact"] .sytec-pack-commercial__item {
		grid-template-columns: minmax(52px, calc(var(--sytec-pack-item-image-size, 64px) * .8)) minmax(0, 1fr);
		grid-template-areas: "image content" "quantity quantity";
	}

	.sytec-pack-commercial__quantity {
		justify-self: end;
	}

	.sytec-pack-commercial__mobile-bar:not([hidden]) {
		display: grid;
	}
}

/* Frontend adapters: the functional selector keeps its original DOM contract. */
.sytec-pack-commercial--frontend {
	container-type: normal;
	--sytec-commercial-columns: var(--sytec-pack-columns-mobile, 1);
	--sytec-commercial-gap: var(--sytec-pack-layout-gap-mobile, var(--sytec-pack-item-gap, 12px));
	--sytec-commercial-alignment: var(--sytec-pack-item-alignment-mobile, stretch);
	--sytec-commercial-display-image: var(--sytec-pack-display-image-mobile, grid);
	--sytec-commercial-display-title: var(--sytec-pack-display-title-mobile, block);
	--sytec-commercial-display-quantity: var(--sytec-pack-display-quantity-mobile, grid);
	--sytec-commercial-item-template: var(--sytec-pack-item-template-mobile, auto minmax(0, 1fr) auto);
	--sytec-commercial-item-areas: var(--sytec-pack-item-areas-mobile, "image content quantity");
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__content {
	container-type: inline-size;
}

@media (max-width: 460px) {
	.sytec-pack-commercial--frontend .sytec-pack-commercial__mobile-bar:not([hidden]) {
		display: grid;
	}

	.sytec-pack-commercial--frontend.is-mobile-bar-sticky.has-mobile-bar::after {
		display: block;
		height: var(--sytec-pack-mobile-bar-space, 0px);
		content: "";
	}

	.sytec-pack-commercial--frontend.is-mobile-bar-sticky .sytec-pack-commercial__mobile-bar {
		position: fixed;
		z-index: 100;
		right: auto;
		left: 0;
		width: 100%;
		max-width: none;
		margin: 0;
	}
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__catalog {
	display: block;
}

.sytec-pack-commercial--frontend .sytec-pack-selector__groups {
	display: grid;
	gap: var(--sytec-pack-group-gap, 20px);
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__group {
	min-width: 0;
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__group .sytec-pack-selector__items {
	display: grid;
	grid-template-columns: repeat(var(--sytec-commercial-columns, 1), minmax(0, 1fr));
	gap: var(--sytec-commercial-gap, 12px);
	align-items: var(--sytec-commercial-alignment, stretch);
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__item {
	grid-template-columns: var(--sytec-commercial-item-template);
	grid-template-areas: var(--sytec-commercial-item-areas);
}

@container (max-width: 460px) {
	.sytec-pack-commercial--frontend:not([data-pack-mode-mobile="vertical"]):not([data-pack-distribution-mobile="stacked"]) .sytec-pack-commercial__group:not([data-pack-group-distribution="stacked"]) .sytec-pack-commercial__item {
		grid-template-columns: minmax(52px, calc(var(--sytec-pack-item-image-size, 64px) * .8)) minmax(0, 1fr);
		grid-template-areas: "image content" "quantity quantity";
	}
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__item-image {
	height: var(--sytec-pack-item-image-size, 64px);
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__item-price small {
	display: block;
	color: var(--sytec-pack-help-color, #646970);
	font-size: var(--sytec-pack-help-size, 12px);
	font-weight: 400;
}

.sytec-pack-commercial--frontend.hides-stock .sytec-pack-selector__availability,
.sytec-pack-commercial--frontend.hides-stock .sytec-pack-selector__stock {
	display: none !important;
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__status:not(.is-valid) {
	color: var(--sytec-pack-error-color, #d63638);
}

.sytec-pack-commercial--frontend[data-display-mode="popup"] .sytec-pack-commercial__summary {
	position: static;
}

.sytec-pack-commercial--frontend[data-display-mode="popup"] .sytec-pack-commercial__group .sytec-pack-selector__items {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.sytec-pack-commercial--frontend[data-display-mode="popup"] .sytec-pack-commercial__item {
	min-width: 0;
}

.sytec-pack-commercial-single-product,
.sytec-pack-commercial-single-product__purchase {
	width: 100%;
	min-width: 0;
}

@container (max-width: 820px) {
	.sytec-pack-commercial--frontend[data-display-mode="popup"] .sytec-pack-commercial__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

.sytec-pack-commercial--frontend .sytec-pack-commercial__submit:focus-visible,
.sytec-pack-commercial--frontend .sytec-pack-commercial__mobile-submit:focus-visible,
.sytec-pack-commercial--frontend .sytec-pack-commercial__quantity button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

@container (min-width: 600px) {
	.sytec-pack-commercial--frontend .sytec-pack-commercial__group .sytec-pack-selector__items {
		grid-template-columns: repeat(var(--sytec-pack-columns-tablet, 1), minmax(0, 1fr));
		gap: var(--sytec-pack-layout-gap-tablet, var(--sytec-pack-item-gap, 12px));
	}

	.sytec-pack-commercial--frontend .sytec-pack-commercial__item {
		grid-template-columns: var(--sytec-pack-item-template-tablet, auto minmax(0, 1fr) auto);
		grid-template-areas: var(--sytec-pack-item-areas-tablet, "image content quantity");
		align-items: var(--sytec-pack-item-alignment-tablet, stretch);
	}

	.sytec-pack-commercial--frontend [data-pack-element="image"] { display: var(--sytec-pack-display-image-tablet, block); }
	.sytec-pack-commercial--frontend [data-pack-element="title"] { display: var(--sytec-pack-display-title-tablet, block); }
	.sytec-pack-commercial--frontend [data-pack-element="quantity"] { display: var(--sytec-pack-display-quantity-tablet, inline-flex); }
}

@media (min-width: 900px) {
	@container (min-width: 600px) {
		.sytec-pack-commercial--frontend .sytec-pack-commercial__group .sytec-pack-selector__items {
			grid-template-columns: repeat(var(--sytec-pack-columns-desktop, 2), minmax(0, 1fr));
			gap: var(--sytec-pack-layout-gap-desktop, var(--sytec-pack-item-gap, 12px));
		}

		.sytec-pack-commercial--frontend .sytec-pack-commercial__item {
			grid-template-columns: var(--sytec-pack-item-template-desktop, auto minmax(0, 1fr) auto);
			grid-template-areas: var(--sytec-pack-item-areas-desktop, "image content quantity");
			align-items: var(--sytec-pack-item-alignment-desktop, stretch);
		}

		.sytec-pack-commercial--frontend [data-pack-element="image"] { display: var(--sytec-pack-display-image-desktop, block); }
		.sytec-pack-commercial--frontend [data-pack-element="title"] { display: var(--sytec-pack-display-title-desktop, block); }
		.sytec-pack-commercial--frontend [data-pack-element="quantity"] { display: var(--sytec-pack-display-quantity-desktop, inline-flex); }
	}
}

