/*
 * PDP below-fold — specs, description, upsells (non-blocking enqueue).
 * Split from product.css for LCP; do not add buy-box rules here.
 */

/*
 * Specs icons — ACF/prod .icons is the flex root (no .led-product__specs-icons).
 * Kept under .specs-header so title + icons stay one row.
 */
html body.led-product-page .led-product__specs-header > .icons,
html body.led-product-page .led-product__specs-header > .product-icons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	flex: 1;
	min-width: 0;
	gap: 6px;
}

html body.led-product-page .led-product__upsells .icons,
html body.led-product-page .led-product__upsells .product-icons,
html body.led-product-page .led-product-card__icons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/*
 * Upsells / cards may nest .icons inside a theme wrapper — unwrap those only.
 * Never apply contents to <noscript> (lazy-load fallback markup becomes text).
 */
html body.led-product-page .led-product-card__icons .icons,
html body.led-product-page .led-product-card__icons .product-icons {
	display: contents !important;
}

html body.led-product-page .led-product__upsells .icons *:not(img):not(noscript),
html body.led-product-page .led-product__upsells .product-icons *:not(img):not(noscript),
html body.led-product-page .led-product-card__icons *:not(img):not(noscript) {
	display: contents;
}

html body.led-product-page .led-product__specs-header > .icons noscript,
html body.led-product-page .led-product__specs-header > .product-icons noscript,
html body.led-product-page .led-product__upsells .icons noscript,
html body.led-product-page .led-product__upsells .product-icons noscript,
html body.led-product-page .led-product-card__icons noscript {
	display: none !important;
}

html body.led-product-page .led-product__specs-header > .icons br,
html body.led-product-page .led-product__specs-header > .product-icons br,
html body.led-product-page .led-product__upsells .icons br,
html body.led-product-page .led-product__upsells .product-icons br,
html body.led-product-page .led-product-card__icons br {
	display: none !important;
}

html body.led-product-page .led-product__specs-header > .icons img,
html body.led-product-page .led-product__specs-header > .product-icons img {
	display: block !important;
	flex: 0 0 auto;
	width: 40px !important;
	height: 40px !important;
	max-height: 40px !important;
	max-width: 40px !important;
	margin: 0;
	float: none !important;
	object-fit: contain;
}

/* Fixed size beats Divi img { width:100% } so cert icons stay in one row */
html body.led-product-page .led-product__upsells .icons img,
html body.led-product-page .led-product__upsells .product-icons img,
html body.led-product-page .led-product-card__icons img {
	display: block;
	flex: 0 0 auto;
	width: 32px !important;
	height: 32px !important;
	max-height: 32px !important;
	max-width: 32px !important;
	margin: 0;
	float: none !important;
	object-fit: contain;
}

/* Specs body — stacked sections */
html body.led-product-page .led-product__specs-body {
	display: flex;
	flex-direction: column;
	gap: 0;
}

html body.led-product-page .led-product__specs-sections {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

html body.led-product-page .led-product__specs-body .led-product__specs-section {
	border: none;
	margin: 16px 0 0;
	min-width: 0;
}

html body.led-product-page .led-product__specs-sections > .led-product__specs-section:first-child,
html body.led-product-page .led-product__specs-body > .led-product__specs-section:first-child {
	margin-top: 0;
}

/* Section bar chrome only — type from body.led-typography h3 / .led-h3 */
html body.led-product-page .led-product__specs-body .led-product__specs-heading,
html body.led-product-page .led-product__specs-body .led-product__specs-section > h3 {
	margin: 0 !important;
	padding: 14px 24px !important;
	background: var(--color-neutral-100, #f0f0f0) !important;
	text-align: left !important;
	color: var(--color-text, #000) !important;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content {
	padding: 16px 0;
	font-size: var(--font-size-body);
	line-height: 1.6;
	color: var(--color-text, #333);
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > p:last-child {
	margin-bottom: 0;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > p:has(+ table) {
	margin-bottom: 4px;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > p + table {
	margin-top: 0;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > table + p {
	margin-top: 12px;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > table:first-child {
	margin-top: 0;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > table {
	width: 100%;
	max-width: none;
	border-collapse: collapse;
	border-spacing: 0;
	border: 1px solid var(--color-neutral-200, #e0e0e0);
}

/* Beat Divi #content-area table td/tr padding so cells share the 24px title inset */
html body.led-product-page #content-area .led-product__specs-content table tr,
html body.led-product-page #content-area .led-product__specs-content table th,
html body.led-product-page #content-area .led-product__specs-content table td,
html body.led-product-page .led-product__specs-body .led-product__specs-content table tr,
html body.led-product-page .led-product__specs-body .led-product__specs-content table th,
html body.led-product-page .led-product__specs-body .led-product__specs-content table td {
	padding: 0;
	max-width: none;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content table tr {
	border-bottom: 1px solid var(--color-neutral-200, #e0e0e0);
}

html body.led-product-page .led-product__specs-body .led-product__specs-content table tr:last-child {
	border-bottom: none;
}

html body.led-product-page #content-area .led-product__specs-content table td,
html body.led-product-page .led-product__specs-body .led-product__specs-content table td {
	padding: 10px 24px !important;
	color: var(--color-text, #333);
	vertical-align: middle;
	text-align: left;
	background: transparent;
	border-radius: 0;
	margin: 0;
}

html body.led-product-page #content-area .led-product__specs-content table td:first-child,
html body.led-product-page .led-product__specs-body .led-product__specs-content table td:first-child {
	width: 30%;
	font-weight: 600;
	color: var(--color-text, #000);
	border-right: 1px solid var(--color-neutral-200, #e0e0e0);
}

html body.led-product-page #content-area .led-product__specs-content table td:only-child,
html body.led-product-page .led-product__specs-body .led-product__specs-content table td:only-child {
	width: 100%;
	border-right: none;
}

/* Multi-column tables (e.g. SKU variations) — thead + equal data columns */
html body.led-product-page #content-area .led-product__specs-content table thead th,
html body.led-product-page .led-product__specs-body .led-product__specs-content table thead th {
	padding: 10px 24px !important;
	font-weight: 600;
	color: var(--color-text, #000);
	text-align: left;
	vertical-align: middle;
	background: transparent;
	border-bottom: 1px solid var(--color-neutral-200, #e0e0e0) !important;
	border-right: 1px solid var(--color-neutral-200, #e0e0e0);
}

html body.led-product-page #content-area .led-product__specs-content table thead th:last-child,
html body.led-product-page .led-product__specs-body .led-product__specs-content table thead th:last-child {
	border-right: none;
}

html body.led-product-page #content-area .led-product__specs-content table thead th:not(:first-child),
html body.led-product-page .led-product__specs-body .led-product__specs-content table thead th:not(:first-child),
html body.led-product-page #content-area .led-product__specs-content table:has(thead) td:not(:first-child),
html body.led-product-page .led-product__specs-body .led-product__specs-content table:has(thead) td:not(:first-child) {
	text-align: center;
}

html body.led-product-page #content-area .led-product__specs-content table:has(thead) td,
html body.led-product-page .led-product__specs-body .led-product__specs-content table:has(thead) td {
	width: auto;
	font-weight: 400;
	color: var(--color-text, #333);
	border-right: 1px solid var(--color-neutral-200, #e0e0e0);
}

html body.led-product-page #content-area .led-product__specs-content table:has(thead) td:last-child,
html body.led-product-page .led-product__specs-body .led-product__specs-content table:has(thead) td:last-child {
	border-right: none;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > table:has(thead):first-child {
	margin-top: 0;
}

/* IES / list rows — no bullets; same 24px inset as section titles + table cells */
html body.led-product-page #content-area .led-product__specs-content ul,
html body.led-product-page .led-product__specs-body .led-product__specs-content ul {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 0 !important;
	padding-inline-start: 0 !important;
	width: 100%;
	border: 1px solid var(--color-neutral-200, #e0e0e0);
}

html body.led-product-page #content-area .led-product__specs-content ul > li,
html body.led-product-page .led-product__specs-body .led-product__specs-content ul > li {
	list-style: none !important;
	list-style-type: none !important;
	margin: 0 !important;
	padding: 10px 24px !important;
	border-bottom: 1px solid var(--color-neutral-200, #e0e0e0);
	text-align: left;
}

html body.led-product-page #content-area .led-product__specs-content ul > li::marker,
html body.led-product-page .led-product__specs-body .led-product__specs-content ul > li::marker,
html body.led-product-page #content-area .led-product__specs-content ul > li::before,
html body.led-product-page .led-product__specs-body .led-product__specs-content ul > li::before {
	content: none !important;
	display: none !important;
}

html body.led-product-page #content-area .led-product__specs-content ul > li:last-child,
html body.led-product-page .led-product__specs-body .led-product__specs-content ul > li:last-child {
	border-bottom: none;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content a,
html body.led-product-page .led-product__specs-body .led-product__specs-content ul li a {
	color: var(--color-secondary-600, #1c86ff);
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	word-break: break-all;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content ul li a u {
	text-decoration: none;
}

html body.led-product-page .led-product__specs-body .led-product__specs-content > .led-product__specs-request-ies {
	display: block;
	width: 100%;
	padding: 10px 24px;
	border: 1px solid var(--color-neutral-200, #e0e0e0);
	color: var(--color-secondary-600, #1c86ff);
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 0.2rem;
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Ordering information — grid of option columns (4 → 3 → 2)
   Markup: .led-product__specs-ordering > __description + __grid > __col > h4 + div rows
   ------------------------------------------------------------------------- */

html body.led-product-page .led-product__specs-ordering {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* WP editor noise — keep __description as a real block */
html body.led-product-page .led-product__specs-ordering br {
	display: none;
}

html body.led-product-page .led-product__specs-ordering p:not(.led-product__specs-ordering__description) {
	display: contents;
}

html body.led-product-page .led-product__specs-ordering__description {
	display: block;
	margin: 0;
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text);
}

html body.led-product-page .led-product__specs-ordering__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	align-items: stretch;
	border-top: 1px solid var(--color-text);
	border-left: 1px solid var(--color-text);
}

html body.led-product-page .led-product__specs-ordering__grid > .led-product__specs-ordering__col {
	min-width: 0;
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--space-3);
	align-content: start;
	height: 100%;
	margin: 0;
	background: var(--color-bg);
	border: none;
	border-right: 1px solid var(--color-text);
	border-bottom: 1px solid var(--color-text);
}

html body.led-product-page .led-product__specs-ordering__col > h4 {
	display: block;
	grid-column: 1 / -1;
	margin: 0;
	padding: var(--space-3) var(--space-5);
	background: var(--color-neutral-50);
	border-bottom: 1px solid var(--color-text);
	font-family: var(--font-family-body, Inter, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
	font-size: var(--font-size-body);
	font-weight: 700;
	line-height: var(--line-height-body);
	letter-spacing: var(--letter-spacing-body);
	text-transform: none;
	color: var(--color-text);
}

html body.led-product-page .led-product__specs-ordering__col > div {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: 1 / -1;
	padding: var(--space-2) var(--space-4) !important;
	border-bottom: 1px solid var(--color-border);
	align-items: start;
	box-sizing: border-box;
}

html body.led-product-page .led-product__specs-ordering__col > div span {
	padding: 0;
	min-width: 0;
}

html body.led-product-page .led-product__specs-ordering__col > div span:first-child {
	padding-left: 0;
}

html body.led-product-page .led-product__specs-ordering__col > div:last-child {
	border-bottom: none;
}

html body.led-product-page .led-product__specs-ordering__col > div span:only-child {
	grid-column: 1 / -1;
}

@media (min-width: 768px) and (max-width: 980px) {
	html body.led-product-page .led-product__specs-ordering__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 981px) {
	html body.led-product-page .led-product__specs-ordering__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
   Below fold — specs (#description) · product description · upsells
   (Purchase / options title / PEWC heading chrome live in product.css.)
   ------------------------------------------------------------------------- */

html body.woocommerce.led-product-page div.product.led-product .led-product__below {
	display: flex;
	flex-direction: column;
	gap: var(--space-6, 1.5rem);
	margin-top: var(--space-6, 1.5rem);
	width: 100%;
	clear: both;
	float: none !important;
}

/* Soft defer paint for below-fold sections (HTML stays for SEO) */
html body.led-product-page .led-product__specs,
html body.led-product-page .led-product__description {
	content-visibility: auto;
	contain-intrinsic-size: auto 480px;
}

html body.led-product-page .led-product__upsells {
	content-visibility: auto;
	contain-intrinsic-size: auto 320px;
}

/* Keep the loading skeleton painted (do not skip the placeholder). */
html body.led-product-page .led-product__upsells[aria-busy="true"] {
	content-visibility: visible;
}

html body.led-product-page .led-product__specs-header {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4, 1rem);
	margin: 0 0 24px;
}

/* Mobile: icons above title when the header stacks */
@media (max-width: 767px) {
	html body.led-product-page .led-product__specs-header {
		flex-wrap: wrap-reverse;
	}

	html body.led-product-page .led-product__specs-header .led-product__specs-title,
	html body.led-product-page .led-product__specs-header .led-product__section-title {
		flex: 1 1 100%;
	}

	html body.led-product-page .led-product__specs-header > .icons,
	html body.led-product-page .led-product__specs-header > .product-icons {
		flex: 1 1 100%;
		justify-content: flex-end !important;
	}
}

html body.led-product-page .led-product__description {
	width: 100%;
	color: var(--color-text, #000);
	font-size: var(--font-size-body);
	line-height: 1.6;
}

html body.led-product-page .led-product__description > *:first-child {
	margin-top: 0;
}

html body.led-product-page .led-product__description > *:last-child {
	margin-bottom: 0;
}

/* Theme-owned upsells — shared .led-product-card (product-card.css) */
html body.led-product-page .led-product__upsells-title {
	margin-bottom: var(--space-6, 1.5rem);
}

html body.led-product-page #left-area ul.led-product__upsells-list,
html body.led-product-page .entry-content ul.led-product__upsells-list,
html body.led-product-page .led-product__upsells-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2, 0.5rem);
	width: 100%;
	margin: 0;
	padding: 0;
	padding-inline-start: 0;
	list-style: none;
	list-style-type: none;
}

html body.led-product-page .led-product__upsells-item {
	display: flex;
	min-width: 0;
	margin: 0;
	float: none;
	clear: none;
}

/* Upsell loading skeleton — card-shaped shimmer */
html body.led-product-page .led-product-card--skel {
	pointer-events: none;
	box-shadow: 0 4px 12px rgb(0 0 0 / 0.06);
}

html body.led-product-page .led-product__upsells-skel-media {
	width: 75%;
	max-width: 180px;
	aspect-ratio: 1 / 1;
	margin: 0.5rem auto 0;
	border-radius: 8px;
	background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
	background-size: 200% 100%;
	animation: led-product-skel-shimmer 1.2s ease-in-out infinite;
}

html body.led-product-page .led-product__upsells-skel-line {
	display: block;
	height: 0.65rem;
	border-radius: 4px;
	background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
	background-size: 200% 100%;
	animation: led-product-skel-shimmer 1.2s ease-in-out infinite;
}

html body.led-product-page .led-product__upsells-skel-line--title {
	width: 92%;
	margin: 0.25rem auto 0;
	height: 0.7rem;
}

html body.led-product-page .led-product__upsells-skel-line--title-short {
	width: 70%;
	margin: 0.35rem auto 0;
	min-height: 0;
}

html body.led-product-page .led-product-card--skel .led-product-card__meta {
	gap: var(--space-2, 0.5rem);
	padding-top: var(--space-2, 0.5rem);
}

html body.led-product-page .led-product__upsells-skel-line--price {
	width: 45%;
	height: 0.9rem;
}

html body.led-product-page .led-product__upsells-skel-line--stock {
	width: 55%;
	height: 0.55rem;
}

html body.led-product-page .led-product__upsells-skel-line--cta {
	width: 100%;
	max-width: 12rem;
	height: 2.5rem;
	margin-inline: auto;
	border-radius: var(--btn-radius, 8px);
}

@keyframes led-product-skel-shimmer {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: -100% 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body.led-product-page .led-product__upsells-skel-media,
	html body.led-product-page .led-product__upsells-skel-line,
	html body.led-product-page .led-product__gallery-skel,
	html body.led-product-page .led-product__embla-thumb {
		animation: none;
		background: #ececec;
	}
}

@media (min-width: 768px) {
	html body.led-product-page #left-area ul.led-product__upsells-list,
	html body.led-product-page .entry-content ul.led-product__upsells-list,
	html body.led-product-page .led-product__upsells-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	html body.led-product-page #left-area ul.led-product__upsells-list,
	html body.led-product-page .entry-content ul.led-product__upsells-list,
	html body.led-product-page .led-product__upsells-list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-3, 0.75rem);
	}
}

/* -------------------------------------------------------------------------
   Placeholders (dashed — remove when ACF wired)
   ------------------------------------------------------------------------- */

html body.led-product-page .led-product__ph {
	display: inline-block;
	border: 1px dashed var(--color-primary-400, #45b449);
	border-radius: 4px;
	background: color-mix(in srgb, var(--color-primary-50, #eaf5ef) 70%, transparent);
}

html body.led-product-page .led-product__ph--inline {
	padding: 0.1em 0.4em;
	font-style: italic;
	color: var(--color-text-muted, #646464);
}

html body.led-product-page .led-product__ph--link {
	padding: 0;
	border: 0;
	background: none;
	border-bottom: 1px dashed var(--color-primary-400, #45b449);
	font-style: italic;
	cursor: default;
}

html body.led-product-page .led-product__ph--icon {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
}

html body.led-product-page .led-product__ph--block {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--space-4, 1rem);
	width: 100%;
	min-height: 5rem;
	box-sizing: border-box;
}

html body.led-product-page .led-product__ph-line {
	display: block;
	height: 0.65rem;
	width: 100%;
	border-radius: 2px;
	background: color-mix(in srgb, var(--color-primary-400, #45b449) 25%, transparent);
}

html body.led-product-page .led-product__ph-line--short {
	width: 60%;
}

html body.led-product-page .led-product__ph--icons {
	display: flex;
	gap: 0.35rem;
	padding: 0.35rem;
	border-style: dashed;
}

html body.led-product-page .led-product__ph--icons span {
	width: 28px;
	height: 28px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--color-primary-400, #45b449) 25%, transparent);
}

html body.led-product-page .led-product__ph--card {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	min-height: 10rem;
}

html body.led-product-page .led-product__ph-text {
	margin: 0;
	color: var(--color-text-muted, #646464);
	font-style: italic;
}

html body.led-product-page .led-theme-product-extension:empty {
	display: none;
}

/* -------------------------------------------------------------------------
   Beat leftover WC/plugin float on icons (keep-list only)
   ------------------------------------------------------------------------- */

/* Icon float reaffirm — Divi img { float } / width:100% companions */
html body.led-product-page .led-product__specs-header > .icons img,
html body.led-product-page .led-product__specs-header > .product-icons img,
html body.led-product-page .led-product__upsells .icons img,
html body.led-product-page .led-product__upsells .product-icons img,
html body.led-product-page .led-product-card__icons img {
	float: none !important;
}