/*
 * Migrated LiteGear product content, rendered inside WooCommerce's existing tab panels.
 *
 * Scoped entirely under .lgpd so nothing here can reach Kino Flo's own product markup. Colours and
 * spacing inherit from the theme rather than being restated — the point of this view is to read the
 * migrated data in situ, not to introduce a second visual language on the product page.
 */

.lgpd {
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ---------------------------------------------------------------- specifications */

.lgpd-group + .lgpd-group {
	margin-top: 2rem;
}

.lgpd-group-title {
	margin: 0 0 0.6rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lgpd-spec-table {
	width: 100%;
	border-collapse: collapse;
	/* Long spec values (cable lengths, voltage ranges) must not force the panel wider than the
	   page — the migrated microsite pages already fought a horizontal-overflow bug. */
	table-layout: fixed;
}

.lgpd-spec-table th,
.lgpd-spec-table td {
	padding: 0.5rem 0.75rem 0.5rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
	overflow-wrap: anywhere;
}

.lgpd-spec-table th {
	width: 40%;
	font-weight: 600;
	opacity: 0.75;
}

/* ---------------------------------------------------------------------- features */

.lgpd-feature-list,
.lgpd-includes-list,
.lgpd-download-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lgpd-feature {
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.lgpd-feature-title {
	display: block;
	font-weight: 600;
}

.lgpd-feature-body {
	display: block;
	opacity: 0.8;
}

/* -------------------------------------------------------------- what's included */

.lgpd-includes-list li {
	position: relative;
	padding: 0.35rem 0 0.35rem 1.25rem;
}

.lgpd-includes-list li::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0.15rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}

.lgpd-includes-value {
	opacity: 0.7;
}

.lgpd-includes-value::before {
	content: " — ";
}

/* -------------------------------------------------------------------- downloads */

.lgpd-download {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: baseline;
	justify-content: space-between;
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}

.lgpd-download-title {
	font-weight: 600;
}

.lgpd-download-meta {
	display: inline-flex;
	gap: 0.75rem;
	font-size: 0.85em;
	opacity: 0.7;
	white-space: nowrap;
}

.lgpd-ext {
	padding: 0.05rem 0.4rem;
	border: 1px solid currentColor;
	border-radius: 2px;
	font-size: 0.85em;
	letter-spacing: 0.05em;
}

/* Source linked it, but it never resolved — five dead links in litegear.com's own content.
   Shown rather than hidden so the gap is legible during review. */
.lgpd-download.is-unavailable {
	opacity: 0.55;
}

.lgpd-missing {
	font-style: italic;
}

/* --------------------------------------------------------------------------
   What's Included — the kit contents list on a product page
   --------------------------------------------------------------------------
   Set to match the SPECIFICATIONS block above it: same uppercase display
   heading, same rule, same measure. It is a list of parts, not prose, so it
   runs in columns rather than one long ladder.
   -------------------------------------------------------------------------- */
.kf-incl { margin-top: 8px; }
.kf-incl__title {
    font-family: var(--kf-display, 'Roboto Condensed', sans-serif);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--kf-ink, #161616);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--kf-line, #E5E5E5);
}
.kf-incl__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 40px;
}
.kf-incl__list[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.kf-incl__list[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kf-incl__item {
    position: relative;
    padding: 11px 0 11px 22px;
    border-bottom: 1px solid var(--kf-line, #E5E5E5);
    font-size: 15px;
    line-height: 1.5;
    color: var(--kf-ink-3, #414243);
}
/* A drawn marker rather than a list bullet: list-style markers cannot be
   coloured or positioned reliably inside a grid item. */
.kf-incl__item::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 19px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kf-yellow, #FED208);
}

@media (max-width: 767px) {
    .kf-incl__list,
    .kf-incl__list[data-cols="3"] { grid-template-columns: minmax(0, 1fr); }
    .kf-incl__title { font-size: 20px; }
}

/* ---------------------------------------------------------- Woo specs panel */

/*
 * The #productinfo section carries WooCommerce's "Additional information" panel
 * (weight, dimensions, visible attributes). It is deliberately ungated in the
 * layout, because every content section in the product templates is gated on an
 * ACF field and the specs would otherwise never render for parts.
 *
 * WooCommerce still emits the heading and an empty table when a product has
 * nothing to show, so collapse the section in that case rather than leaving a
 * bare "Additional information" over blank space. Where :has() is unsupported
 * the section simply stays visible, which is the pre-existing behaviour.
 */
#productinfo:not(:has(.shop_attributes tr)) {
	display: none;
}

/*
 * Match the specs panel to the other content bands. WooCommerce ships its own
 * heading and table styling, which lands as sentence-case body type.
 *
 * The reference is #productspecs / #downloads / #relatedproducts, whose headings
 * are Roboto 30px/700 uppercase in #212C34 with no underline rule. What's
 * Included looks similar but is deliberately not the model: it sits in the
 * narrower default container and carries a rule under its title, so matching it
 * would leave this panel misaligned with everything else on the page.
 */
.kf-product-specs h2 {
	font-family: var(--kf-body, Roboto, Arial, sans-serif);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.2;
	text-transform: uppercase;
	color: #212C34;
	margin: 0 0 24px;
}

.kf-product-specs .shop_attributes {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.kf-product-specs .shop_attributes tr {
	border-bottom: 1px solid var(--kf-line, #E5E5E5);
}

.kf-product-specs .shop_attributes th,
.kf-product-specs .shop_attributes td {
	padding: 14px 0;
	border: 0;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	vertical-align: top;
	color: #212C34;
}

.kf-product-specs .shop_attributes th {
	width: 260px;
	padding-right: 24px;
	font-weight: 700;
}

.kf-product-specs .shop_attributes td {
	font-weight: 400;
}

/* Woo wraps attribute values in a paragraph, which would add a stray gap. */
.kf-product-specs .shop_attributes td p {
	margin: 0;
}

@media (max-width: 767px) {
	.kf-product-specs h2 { font-size: 24px; }
	.kf-product-specs .shop_attributes th { width: 140px; }
}