@media ( min-width: 600px ) {
		.aabex-pd-sticky-col {
			position: sticky;
			align-self: flex-start;
		}
	}
	.aabex-pd-variant-group {
		margin: 4px 0 18px;
		order: 3;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	.aabex-pd-variant-label {
		font-weight: 600;
		font-size: 14px;
		margin-bottom: 8px;
		color: inherit;
	}
	.aabex-pd-variant-selected-value {
		font-weight: 400;
		opacity: 0.75;
	}
	.aabex-pd-variant-required {
		color: #d9534f;
		margin-left: 2px;
	}
	.aabex-pd-variant-chips {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}
	.aabex-pd-chip {
		border: 1.5px solid #d7dbe3;
		background: #fff;
		border-radius: 8px;
		padding: 8px 14px;
		font-size: 14px;
		line-height: 1.3;
		cursor: pointer;
		transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
		text-align: left;
		min-height: 44px;
	}
	.aabex-pd-chip:hover {
		border-color: var( --aabex-pd-accent, #f5821f );
	}
	.aabex-pd-chip.is-selected {
		border-color: var( --aabex-pd-accent, #f5821f );
		background: var( --aabex-pd-accent, #f5821f );
		color: #fff;
	}
	.aabex-pd-chip--model {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}
	.aabex-pd-chip-code {
		font-weight: 600;
	}
	.aabex-pd-chip-sub {
		font-size: 12px;
		opacity: 0.75;
	}
	.aabex-pd-chip.is-selected .aabex-pd-chip-sub {
		opacity: 0.9;
	}
	.aabex-pd-variant-hint {
		color: #d9534f;
		font-size: 13px;
		margin-top: 8px;
	}
	.aabex-pd-variant-group.aabex-pd-shake {
		animation: aabex-pd-shake 0.35s ease;
	}
	@keyframes aabex-pd-shake {
		25% { transform: translateX(-4px); }
		75% { transform: translateX(4px); }
	}
	.aabex-pd-full-desc {
		order: unset;
		/* The product gallery/summary row above is a Gutenberg "wide
		   aligned" block (class "alignwide"), which the theme centers
		   inside the page's content area using
		   "max-width: var(--wp--style--global--wide-size)" plus its
		   default ".is-layout-constrained > :where(...)" rule that
		   forces "margin-left/right: auto !important" on every
		   top-level block. Matching that exact max-width here (and
		   deliberately NOT overriding the margins) means this block
		   gets centered by the theme using the identical math as the
		   row above, so its left edge lands exactly on the product
		   image's left edge at every screen width -- instead of a
		   fixed-pixel guess that only happens to work at one
		   viewport size. */
		max-width: var(--wp--style--global--wide-size, 1340px) !important;
	}
	.aabex-pd-full-desc #tab-description,
	.aabex-pd-full-desc #tab-description p,
	.aabex-pd-full-desc #tab-description li {
		/* WooCommerce's own ".woocommerce-Tabs-panel--description p"
		   rule sets an explicit 14px directly on the paragraphs, which
		   wins over inheritance from the container no matter how high
		   the container rule's specificity is. Target the text elements
		   directly (with the same #tab-description + class combo) so
		   this rule's specificity actually beats that one. */
		font-size: 20px;
		line-height: 1.85;
	}
	.aabex-pd-full-desc #tab-description.aabex-pd-desc-collapsed {
		position: relative;
		overflow: hidden;
	}
	.aabex-pd-full-desc #tab-description.aabex-pd-desc-collapsed::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 64px;
		background: linear-gradient( to bottom, rgba( 255, 255, 255, 0 ), #fff 85% );
		pointer-events: none;
	}
	.aabex-pd-desc-toggle {
		display: inline-block;
		margin-top: 14px;
		background: none;
		border: none;
		padding: 0;
		font-size: 15px;
		font-weight: 600;
		cursor: pointer;
		text-decoration: underline;
	}
	.aabex-pd-desc-toggle:hover {
		opacity: 0.8;
	}