:root {
	--hg-brand: #5e33df;
	--hg-brand-dark: #4618d1;
	--hg-ink: #111111;
	--hg-muted: #595959;
}

/* ------------------------------------------------------------------
   1. FontAwesome 4 names that no longer resolve in FontAwesome 6.
      195 clock icons and 142 comment icons were rendering as empty boxes.
   ------------------------------------------------------------------ */
.fa-clock-o::before {
	content: "\f017";
	font-family: "Font Awesome 6 Free", "FontAwesome";
	font-weight: 400;
}

.fa-comment-o::before {
	content: "\f075";
	font-family: "Font Awesome 6 Free", "FontAwesome";
	font-weight: 400;
}

/* ------------------------------------------------------------------
   2. Readable post meta. Was #A0A0A0 at 2.61:1 and 10px.
   ------------------------------------------------------------------ */
.jeg_post_meta,
.jeg_post_meta a,
.jeg_meta_date,
.jeg_meta_author,
.jeg_meta_author a,
.jeg_meta_comment,
.jeg_postblock .jeg_post_meta,
.jeg_post_meta .fa {
	color: var(--hg-muted);
}

.jeg_post_meta,
.jeg_meta_date,
.jeg_meta_author,
.jeg_meta_comment {
	font-size: 13px;
	line-height: 1.5;
}

.jeg_postblock .jeg_post_category a,
.jeg_post_category a {
	font-size: 12px;
	letter-spacing: .3px;
}

/* meta sitting on a dark image keeps its light treatment */
.jeg_postblock_carousel .jeg_post_meta,
.jeg_postblock_carousel .jeg_post_meta a,
.jeg_slide_caption .jeg_post_meta,
.jeg_slide_caption .jeg_post_meta a,
.jeg_thumb .jeg_post_meta,
.jeg_pl_lg_box .jeg_post_meta,
.jeg_pl_lg_box .jeg_post_meta a {
	color: rgba(255, 255, 255, .92);
}

/* ------------------------------------------------------------------
   3. One accent colour. Replaces the green introduced by the earlier
      store snippets. White on #5E33DF measures 6.97:1.
   ------------------------------------------------------------------ */
.woocommerce ul.products li.product .button,
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wc-block-components-button:not(.is-link) {
	background-color: var(--hg-brand) !important;
	border-color: var(--hg-brand) !important;
	color: #fff !important;
	border-radius: 10px;
	font-weight: 700;
	min-height: 48px;
}

.woocommerce ul.products li.product .button:hover,
.woocommerce div.product form.cart .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.wc-block-components-button:not(.is-link):hover {
	background-color: var(--hg-brand-dark) !important;
	border-color: var(--hg-brand-dark) !important;
	color: #fff !important;
}

.woocommerce ul.products li.product:hover {
	border-color: var(--hg-brand) !important;
	box-shadow: 0 12px 30px rgba(94, 51, 223, .16) !important;
}

ul.hg-games a:hover {
	background: var(--hg-brand) !important;
	border-color: var(--hg-brand) !important;
	color: #fff !important;
}

ul.hg-trust {
	background: rgba(94, 51, 223, .06) !important;
	border-color: rgba(94, 51, 223, .22) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
	background: rgba(94, 51, 223, .06) !important;
	border-left-color: var(--hg-brand) !important;
}

/* ------------------------------------------------------------------
   4. Product title and price read the same way on every template.
      Title was purple on the shop and #111 in the cart; price was purple,
      then #404040, then green. Title is now ink, price is the accent.
   ------------------------------------------------------------------ */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.wc-block-grid__product-title,
.wp-block-post-title a {
	color: var(--hg-ink) !important;
	font-weight: 700;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price,
.wc-block-grid__product-price {
	color: var(--hg-brand) !important;
	font-weight: 800;
}

.woocommerce ul.products li.product .price del,
.woocommerce div.product .price del {
	color: var(--hg-muted) !important;
	font-weight: 600;
}

/* the sr-only price-range sentence must not print next to the figures */
.woocommerce .price .screen-reader-text,
.woocommerce .price .from {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

/* ------------------------------------------------------------------
   5. Touch targets. The hamburger measured 19px wide and search 20px.
   ------------------------------------------------------------------ */
.jeg_mobile_toggle,
.jeg_search_toggle,
.jeg_mobile_wrapper .toggle_btn,
.jeg_nav_item > a.jeg_search_toggle {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

.jeg_post_meta a,
.jeg_post_category a,
.jeg_pagination a,
.jeg_readmore {
	display: inline-block;
	min-height: 24px;
	line-height: 24px;
}

.jeg_share_button a,
.jeg_sharelist a {
	min-width: 44px;
	min-height: 44px;
}

/* ------------------------------------------------------------------
   6. Keyboard focus was invisible site-wide.
   ------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
	outline: 3px solid var(--hg-brand) !important;
	outline-offset: 2px !important;
	border-radius: 4px;
}

.hg-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 20px;
	background: var(--hg-brand);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.hg-skip-link:focus {
	left: 0;
	color: #fff;
}

/* ------------------------------------------------------------------
   7. Empty cart. "Browse store" was 95x22px of plain text with no
      background and no underline, so it did not read as an action.
   ------------------------------------------------------------------ */
.wc-block-cart__empty-cart__title + p a,
.wp-block-woocommerce-empty-cart-block a.wp-block-button__link,
.wp-block-woocommerce-empty-cart-block > p > a,
.cart-empty + .return-to-shop a,
.woocommerce .return-to-shop a.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 28px !important;
	background: var(--hg-brand) !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.wp-block-woocommerce-empty-cart-block > p > a:hover,
.woocommerce .return-to-shop a.button:hover {
	background: var(--hg-brand-dark) !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------
   8. Homepage slider. Caption content is 777px tall inside a 228px
      slide, so the headline was clipped out of sight on phones.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.jeg_slide_caption {
		top: auto !important;
		bottom: 0 !important;
		height: auto !important;
		max-height: 100%;
		padding: 14px 16px !important;
		background: linear-gradient(to top, rgba(0, 0, 0, .88) 12%, rgba(0, 0, 0, 0));
		overflow: hidden;
	}

	.jeg_slide_caption .jeg_post_excerpt,
	.jeg_slide_caption .jeg_post_meta .jeg_meta_author,
	.jeg_slide_caption .jeg_post_meta .jeg_meta_comment {
		display: none !important;
	}

	.jeg_slide_caption .jeg_post_title {
		font-size: 18px !important;
		line-height: 1.3 !important;
		margin: 6px 0 4px !important;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.jeg_slide_caption .jeg_post_title a {
		color: #fff !important;
	}
}

/* ------------------------------------------------------------------
   9. Phone layout. The text logo rendered at 60px and ate the header;
      the product image pushed add-to-cart 1,266px down the page.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.jeg_logo h1,
	.jeg_logo h1 a,
	.jeg_mobile_logo h1,
	.site-title {
		font-size: 28px !important;
		line-height: 1.2 !important;
	}

	.jeg_mobile_wrapper .jeg_nav_item,
	.jeg_mobile_wrapper {
		align-items: center;
	}

	.woocommerce div.product .woocommerce-product-gallery {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 14px;
	}

	.woocommerce div.product .woocommerce-product-gallery img {
		border-radius: 12px;
	}

	.woocommerce div.product .product_title {
		font-size: 22px !important;
		line-height: 1.25;
	}

	/* nothing interactive below 13px on a phone */
	.jeg_post_meta,
	.jeg_post_meta a,
	.jeg_meta_date,
	.jeg_meta_author,
	.jeg_breadcrumbs,
	.jeg_breadcrumbs a,
	.woocommerce-breadcrumb,
	.woocommerce-breadcrumb a {
		font-size: 13px !important;
	}
}

/* ------------------------------------------------------------------
   10. Footer. Three links and no store entry; the extra items added by
       the shop-access snippet need room to breathe.
   ------------------------------------------------------------------ */
.jeg_footer .jeg_menu li a,
.jeg_footer_secondary .jeg_menu li a {
	display: inline-block;
	min-height: 28px;
	line-height: 28px;
}

.jeg_footer a:focus-visible {
	outline-color: #fff !important;
}