/**
 * Strukly — SKU + QR card.
 *
 * All visual properties are exposed as CSS custom properties so the active
 * theme can override them without rewriting the rules. Defaults are neutral
 * (white card, gray border, black text) so the plugin looks acceptable
 * out of the box on any WooCommerce theme.
 */
.strukly-product-qr {
	--strukly-qr-bg:       #ffffff;
	--strukly-qr-border:   #e5e7eb;
	--strukly-qr-radius:   12px;
	--strukly-qr-shadow:   0 1px 3px rgba(0, 0, 0, .06);
	--strukly-qr-text:     #111827;
	--strukly-qr-size:     120px;
	--strukly-qr-padding:  14px 16px 12px;
	--strukly-qr-gap:      8px;
	--strukly-qr-margin:   18px 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--strukly-qr-gap);
	width: fit-content;
	padding: var(--strukly-qr-padding);
	margin: var(--strukly-qr-margin);
	background: var(--strukly-qr-bg);
	border: 1px solid var(--strukly-qr-border);
	border-radius: var(--strukly-qr-radius);
	box-shadow: var(--strukly-qr-shadow);
}
.strukly-product-qr__code {
	width: var(--strukly-qr-size);
	height: var(--strukly-qr-size);
	display: flex;
	align-items: center;
	justify-content: center;
}
.strukly-product-qr__code img,
.strukly-product-qr__code canvas {
	display: block;
	width: var(--strukly-qr-size) !important;
	height: var(--strukly-qr-size) !important;
}
.strukly-product-qr__label {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--strukly-qr-text);
	max-width: var(--strukly-qr-size);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

/* 1D-barcode variant — overrides the QR-square sizing rules so the card
   grows to whatever width the SVG barcode needs. JsBarcode emits an SVG
   with an intrinsic aspect ratio (typically 3:1). */
.strukly-product-qr--barcode {
	width: auto;
	max-width: 100%;
}
.strukly-product-qr--barcode .strukly-product-qr__code {
	width: auto;
	height: auto;
	min-width: 160px;
}
.strukly-product-qr--barcode .strukly-product-qr__code svg {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	display: block;
}
.strukly-product-qr--barcode .strukly-product-qr__label {
	max-width: 100%;
}