/**
 * HLC Product Dynamic Bridge — styles.
 *
 * Loaded only on product pages that use the custom Elementor design. Nothing
 * here restyles the design: these rules cover states the design had no markup
 * for (unavailable option, out of stock, the reviews panel) and keep the real
 * product image sitting exactly where the placeholder box was.
 */

/* Real image inside the design's image box — same box, same radius. */
[data-hlc-hero] .img-main {
	overflow: hidden;
}

/*
 * The design's image frame was 560x456 (and shorter fixed heights on tablet and
 * phone) while the product photography is square, so the top and bottom of every
 * jar was being cropped — 19% lost on desktop, 24% on mobile. Matching the frame
 * to the artwork shows the whole photo at full width. !important is needed
 * because the design sets a fixed height per breakpoint.
 */
[data-hlc-hero] .img-main {
	aspect-ratio: 1 / 1 !important;
	height: auto !important;
}
[data-hlc-hero] .img-main .hlc-main-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

/* Stars above the product's rating are dimmed rather than removed. */
.hlc-star-muted {
	opacity: 0.28;
}

/* ---------------------------------------------------------------- a11y fixes */

/* Keyboard focus was invisible on every custom control. */
[data-hlc-hero] .pill:focus-visible,
[data-hlc-hero] .thumb:focus-visible,
[data-hlc-hero] .qty-step:focus-visible,
[data-hlc-hero] .btn-cart:focus-visible,
[data-hlc-hero] .btn-buy:focus-visible,
[data-hlc-hero] [data-hlc-reviews-link]:focus-visible,
[data-hlc-related] button:focus-visible,
.hlc-video-facade:focus-visible {
	outline: 3px solid #1b1b1b;
	outline-offset: 2px;
	border-radius: 6px;
}

/*
 * Bigger tap targets without changing how anything looks: an invisible overlay
 * extends the hit area to ~44px. The size pills and the reviews link were
 * 28px and 22px tall.
 */
[data-hlc-hero] .pill,
[data-hlc-hero] [data-hlc-reviews-link],
[data-hlc-hero] .breadcrumb a {
	position: relative;
}
[data-hlc-hero] .pill::after,
[data-hlc-hero] [data-hlc-reviews-link]::after,
[data-hlc-hero] .breadcrumb a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	min-height: 44px;
	height: 100%;
}

/* Readability: these were 1.28:1 and 2.75:1 against white. */
[data-hlc-hero] .price-old,
[data-hlc-related] [class*="__strike"] {
	color: #6b6b6b !important;
}
/* Step numerals were #E3E3E3 (1.28:1). Large text needs 3:1; #878787 gives ~3.6:1. */
.elementor .step-num,
.elementor [class*="step-num"] {
	color: #878787 !important;
}

/* --------------------------------------------------------------- video facade */

/*
 * The real YouTube thumbnail is shown as an ordinary <img> (not a background),
 * so it is plainly visible; the embed itself loads only on click.
 */
.hlc-video-facade {
	position: relative;
	cursor: pointer;
}
.hlc-video-facade {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.hlc-video-facade::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 68px;
	height: 68px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.72) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat center / 30px 30px;
	pointer-events: none;
	z-index: 2;
}
.hlc-video-facade:hover::after {
	background-color: rgba(0, 0, 0, 0.85);
}
/* Keep the un-loaded embed out of the way without collapsing the frame. */
.hlc-video-facade iframe {
	opacity: 0;
}

/* ------------------------------------------------- horizontal scroll affordance */

.elementor .ct-table,
.elementor .delivery-pills {
	scrollbar-width: thin;
}
/* Fade on the wrapper (not the scroller) so it stays put while the strip moves.
   Only where the content actually overflows. */
@media (max-width: 1024px) {
	.elementor .ct-inner,
	.elementor .delivery-frame {
		position: relative;
	}
	.elementor .ct-inner::after,
	.elementor .delivery-frame::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 36px;
		height: 100%;
		pointer-events: none;
		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
	}
}

/* --------------------------------------------- reviews panel type, on-scale */

.hlc-reviews #reviews h2,
.hlc-reviews .comment-reply-title {
	font-family: Montserrat, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
}
.hlc-reviews #reviews p,
.hlc-reviews #reviews .description,
.hlc-reviews .comment-form-comment label,
.hlc-reviews .comment-notes {
	font-family: "DM Sans", sans-serif;
	font-size: 14px;
	line-height: 1.6;
}
.hlc-reviews .woocommerce-review__author {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 700;
}
.hlc-reviews .woocommerce-review__published-date {
	font-family: "DM Sans", sans-serif;
	font-size: 13px;
}

/* Option that cannot be bought right now. */
[data-hlc-hero] .pill[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

/* Buttons: disabled + in-flight states. */
[data-hlc-hero] .btn-cart[disabled],
[data-hlc-hero] .btn-buy[disabled],
[data-hlc-related] button[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}
[data-hlc-action].is-busy {
	opacity: 0.75;
	pointer-events: none;
}

/* Validation / failure message under the buttons. */
[data-hlc-hero] .hlc-msg {
	display: none;
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: #b3261e;
}
[data-hlc-hero] .hlc-msg.is-visible {
	display: block;
}

/* Related card image becomes a link to that product. */
[data-hlc-related] .hlc-card-link {
	position: absolute;
	inset: 0;
	display: block;
}

/* Native WooCommerce reviews, revealed by the design's review links. */
.hlc-reviews[hidden] {
	display: none;
}
.hlc-reviews {
	width: 100%;
	padding: 48px 24px 64px;
	box-sizing: border-box;
	background: #fff;
}
.hlc-reviews__inner {
	max-width: 1200px;
	margin-inline: auto;
}
.hlc-reviews #reviews {
	scroll-margin-top: 90px;
}
.hlc-reviews .comment-reply-title,
.hlc-reviews #reviews h2 {
	font-family: Montserrat, sans-serif;
}

@media (max-width: 768px) {
	.hlc-reviews {
		padding: 32px 16px 48px;
	}
}

/*
 * The theme's sticky add-to-cart bar repeats the price and a second cart
 * button, and its link points at the native product anchor this template does
 * not render. The custom design owns that job here.
 */
.ast-sticky-add-to-cart {
	display: none !important;
}