html {
	scroll-behavior: smooth;
}
h1 {
	font-size: var(--h1-font-size,var(--font-size-xxxl));
}
p:last-child {
	--paragraph-margin-bottom: inherit;
}
figure.license-type {
	padding: 1em 5%;
	border: 1px solid var(--color-custom-5);
}

/* Dropdown Menu */
.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover {
	background-color: #ddd;
}

.dropdown:hover .dropdown-content {
	display: block;
}

.dropdown:hover .dropbtn {
	background-color: var(--color-primary);
}

/* GravityView */
.gv-list-view.gv-no-results,
.gv-container-no-results {
	display: none;
}

/* LearnDash course grid (Account page — not gated to single course/lesson/topic/quiz) */
.ld-course-list-items .ld_course_grid .entry-title {
	font-size: var(--font-size-xxl);
}

/*
 * WooCommerce product-loop markup. Also rendered by the [products]
 * shortcode on non-WooCommerce pages (e.g. ce-landing), which
 * is_woocommerce() does not match — kept unconditional here rather than
 * in woocommerce.css.
 */
.products .product {
	background-color: var(--color-white);
	border-radius: var(--border-radius);
	box-shadow: 0 1rem 2rem -1rem rgb(35 44 57 / 10%);
	padding: 2em 5% 1em!important;
}
.products .product span.price {
	font-size: var(--font-size-xxxl);
	font-weight: bold;
}
.products .shop-buttons a.button {
	display: flex;
	width: 100%;
	color: var(--button-color);
	line-height: 2em;
	font-size: var(--font-size-md);
	margin-bottom: 1em;
}
.product p.ce-hours {
	font-size: var(--font-size-xl);
}

@media only screen and (min-width: 600px) {
	.products .shop-buttons a.button {
		width: 50%;
		margin: 0 auto 1em;
	}
}

@media only screen and (min-width: 800px) {
	h1 {
		font-size: var(--h1-font-size,var(--font-size-xxxxl));
	}

	.products .product {
		display: grid;
		grid-template-columns: repeat( 3, 1fr);
		grid-template-rows: auto;
		grid-gap: 1em;
		grid-template-areas:
			"title title price"
			"aprovals course buttons";

		text-align: left;
	}
	.products .product a {
		grid-area: title;
	}
	.products .product .product-top {
		grid-area: price;
	}
	.products .product .course-meta {
		grid-area: course;
		width: 100%;
	}
	.products .product .aprovals {
		grid-area: aprovals;
	}
	.products .products .shop-buttons {
		grid-area: buttons;
		width: 100%;
	}
	.products .shop-buttons a.button {
		width: 100%;
	}
	.woocommerce-loop-product__title {
		font-size: var(--product-title-font-size,var(--font-size-xl));
	}
}