/* ==========================================================================
   Bergstrom Product Specs, front end

   Every colour and measurement is a variable, so retheming is one block.
   Only three components: chips, label and value lists, download lists.
   ========================================================================== */

:root {
	--bgs-gold: #E0C88E;
	--bgs-gold-lt: #F2E6C8;
	--bgs-white: #FFFFFF;
	--bgs-text: #C2C6C9;
	--bgs-muted: #8A9095;
	--bgs-faint: #63696E;
	--bgs-line: rgba( 255, 255, 255, .10 );
	--bgs-line-2: rgba( 255, 255, 255, .20 );
	--bgs-font: inherit;
	--bgs-label-w: 150px;
	--bgs-gap: 44px;
}

/* --------------------------------------------------------------------------
   [bgs_specs] default style, the pill row
   -------------------------------------------------------------------------- */

.bgs-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	font-family: var( --bgs-font );
	margin: 0;
}

.bgs-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-weight: 300;
	padding: 8px 16px;
	border: 1px solid var( --bgs-line-2 );
	border-radius: 24px;
	color: var( --bgs-text );
	line-height: 1.4;
	white-space: nowrap;
}

.bgs-chip b {
	color: var( --bgs-gold );
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   [bgs_specs style="list"] and [bgs_attributes]
   -------------------------------------------------------------------------- */

.bgs-list {
	display: grid;
	grid-template-columns: repeat( var( --bgs-cols, 3 ), minmax( 0, 1fr ) );
	gap: 0 var( --bgs-gap );
	margin: 0;
	padding: 0;
	font-family: var( --bgs-font );
}

.bgs-list .bgs-row {
	display: flex;
	gap: 22px;
	padding: 7px 0;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	break-inside: avoid;
}

.bgs-list dt {
	flex: none;
	min-width: var( --bgs-label-w );
	margin: 0;
	color: var( --bgs-muted );
	font-weight: 300;
}

.bgs-list dd {
	margin: 0;
	color: var( --bgs-white );
	font-weight: 300;
}

/* --------------------------------------------------------------------------
   [bgs_downloads]
   -------------------------------------------------------------------------- */

.bgs-downloads {
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var( --bgs-font );
}

.bgs-downloads li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid var( --bgs-line );
	list-style: none;
}

.bgs-downloads a,
.bgs-download__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	font-size: 13.5px;
	font-weight: 300;
	color: var( --bgs-text );
	text-decoration: none;
	transition: color .2s ease;
}

.bgs-downloads a:hover,
.bgs-downloads a:focus-visible {
	color: var( --bgs-gold-lt );
	text-decoration: none;
}

.bgs-download--empty .bgs-download__inner {
	color: var( --bgs-faint );
}

.bgs-downloads svg {
	width: 16px;
	height: 16px;
	flex: none;
	stroke: var( --bgs-gold );
	fill: none;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: stroke .2s ease;
}

.bgs-downloads a:hover svg {
	stroke: var( --bgs-gold-lt );
}

.bgs-download--empty svg {
	stroke: var( --bgs-faint );
}

.bgs-downloads em {
	margin-left: auto;
	font-style: normal;
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --bgs-faint );
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Optional heading on the downloads and attributes shortcodes
   -------------------------------------------------------------------------- */

.bgs-heading {
	font-family: var( --bgs-font );
	font-size: 10.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --bgs-gold );
	margin: 0 0 14px;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media ( max-width: 1024px ) {

	.bgs-list {
		grid-template-columns: repeat( auto-fit, minmax( 260px, 1fr ) );
	}
}

@media ( max-width: 767px ) {

	.bgs-list {
		grid-template-columns: 1fr;
	}

	.bgs-list .bgs-row {
		gap: 16px;
	}

	.bgs-list dt {
		min-width: 120px;
	}

	.bgs-chip {
		font-size: 10.5px;
		padding: 7px 13px;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.bgs-downloads a,
	.bgs-downloads svg {
		transition: none;
	}
}
/* ==========================================================================
   Bergstrom, wattage and lumen tables

   The catalogue import writes every table into the product Description with
   the class bgs-table. Append this to the bottom of the installed plugin at
   bergstrom-specs/assets/front.css, or paste it into Elementor Site Settings
   Custom CSS. It uses the variables the plugin already defines.

   The extra selectors are a fallback for the case where the block editor
   strips the class on a later save.
   ========================================================================== */

.bgs-table,
.elementor-widget-woocommerce-product-content table,
.woocommerce-product-details__short-description table,
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 8px;
	font-family: var( --bgs-font, inherit );
	font-size: 13.5px;
	font-weight: 300;
	background: none;
	border: 0;
}

.bgs-table thead th,
.elementor-widget-woocommerce-product-content table thead th,
.woocommerce-product-details__short-description table thead th,
.entry-content table thead th {
	text-align: left;
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --bgs-gold, #E0C88E );
	padding: 0 22px 10px 0;
	border: 0;
	border-bottom: 1px solid var( --bgs-line-2, rgba( 255, 255, 255, .20 ) );
	white-space: nowrap;
	background: none;
}

.bgs-table tbody td,
.elementor-widget-woocommerce-product-content table tbody td,
.woocommerce-product-details__short-description table tbody td,
.entry-content table tbody td {
	padding: 10px 22px 10px 0;
	border: 0;
	border-bottom: 1px solid var( --bgs-line, rgba( 255, 255, 255, .10 ) );
	color: var( --bgs-white, #FFFFFF );
	font-weight: 300;
	background: none;
	vertical-align: top;
}

/* First column reads as a label, the rest are figures. */
.bgs-table tbody td:first-child {
	color: var( --bgs-muted, #8A9095 );
	white-space: nowrap;
}

.bgs-table tbody tr:last-child td {
	border-bottom: 0;
}

.bgs-table th:last-child,
.bgs-table td:last-child {
	padding-right: 0;
}

/* Ragged rows are padded with empty cells, which should not draw a gap. */
.bgs-table td:empty {
	padding: 0;
}

/* The small gold heading the import writes above each table. */
.elementor-widget-woocommerce-product-content h3,
.woocommerce-product-details__short-description h3,
.entry-content h3 {
	font-family: var( --bgs-font, inherit );
	font-size: 10.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	font-weight: 400;
	color: var( --bgs-gold, #E0C88E );
	margin: 34px 0 14px;
}

/* Intro paragraph above the table. */
.elementor-widget-woocommerce-product-content p,
.entry-content p {
	color: var( --bgs-text, #C2C6C9 );
	font-weight: 300;
	line-height: 1.85;
}

@media ( max-width: 767px ) {

	.bgs-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.bgs-table thead th,
	.bgs-table tbody td {
		padding-right: 16px;
		white-space: nowrap;
	}
}