/**
 * Single product page — hanfoels.de
 *
 * Geometry taken from alpen-cbd.de/bio-cbd-oel-20-prozent/ measured at 1440px:
 *   variant list   white, 1px rgba(0,0,0,.08), radius 14px, rows 25px padding
 *   variant title  16px / 750 / #111827
 *   discount badge radius 999px, 4px 10px, 12px / 800
 *   legend chip    radius 999px, 6px 12px, 12px / 600, sits on the top border
 *   qty + button   42px tall, quantity 102px, 16px gap
 *   trust band     under the gallery, #F5F6F4, 16px icons
 *
 * Colours are hanfoels' own (#004C45 / #C2EFCB) rather than the reference's
 * olive — the header, footer and buttons across the rest of this site are built
 * on that palette, and borrowing another brand's green would clash with them.
 */

/* --------------------------------------------------------------- tokens -- */

:root {
	--hf-green: #004c45;
	--hf-green-dark: #00332e;
	--hf-mint: #c2efcb;
	--hf-ink: #111827;
	--hf-muted: #6b7370;
	--hf-line: rgba(0, 0, 0, 0.08);
	--hf-line-soft: rgba(0, 0, 0, 0.06);
	--hf-sand: #f5f6f4;
	--hf-radius: 14px;
}

/* ------------------------------------------------------- variant cards --- */

/* Once the cards exist the native select is redundant. Scoped to the class the
   script adds, so the select stays usable if the script never runs. */
.variations_form.hf-has-variant-cards .variations {
	display: none;
}

.hf-variants {
	position: relative;
	margin: 0 0 18px;
	border: 1px solid var(--hf-line);
	border-radius: var(--hf-radius);
	background-color: #fff;
}

/* Chip straddling the top border, as on the reference. */
.hf-variants__legend {
	position: absolute;
	top: -13px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 999px;
	background-color: var(--hf-sand);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hf-muted);
}

.hf-variants__list {
	display: flex;
	flex-direction: column;
	border-radius: var(--hf-radius);
	overflow: hidden;
}

.hf-variants button.hf-variants__item {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	margin: 0;
	padding: 25px;
	border: 0;
	border-top: 1px solid var(--hf-line-soft);
	border-radius: 0;
	/* The cards are real <button>s for keyboard support, which means the
	   Elementor kit's global button styling (dark green fill, white text)
	   applies to them. Its `.elementor-kit-N button` selector outranks a single
	   class, so these rules are written as `.hf-variants button.…` to win. */
	background-color: #fff;
	color: var(--hf-ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* The first row sits against the wrapper's own border. */
.hf-variants button.hf-variants__item:first-child {
	border-top: 0;
}

.hf-variants button.hf-variants__item:hover:not(.is-active):not(:disabled) {
	background-color: rgba(0, 76, 69, 0.03);
}

.hf-variants button.hf-variants__item:focus-visible {
	outline: 2px solid var(--hf-green);
	outline-offset: -2px;
}

.hf-variants button.hf-variants__item.is-active {
	background-color: rgba(0, 76, 69, 0.06);
}

.hf-variants button.hf-variants__item.is-out-of-stock {
	opacity: 0.45;
	cursor: not-allowed;
}

.hf-variants__radio {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 2px solid #c4cbc9;
	border-radius: 50%;
	position: relative;
	transition: border-color 0.18s ease;
}

.hf-variants button.hf-variants__item.is-active .hf-variants__radio {
	border-color: var(--hf-green);
}

.hf-variants button.hf-variants__item.is-active .hf-variants__radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background-color: var(--hf-green);
}

.hf-variants__id {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.hf-variants__name {
	font-size: 16px;
	font-weight: 750;
	line-height: 1.15;
	color: var(--hf-ink);
}

.hf-variants__size {
	font-size: 14px;
	font-weight: 400;
	color: var(--hf-muted);
}

.hf-variants__pricing {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}

.hf-variants__prices {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Woo's price_html arrives as <del>…</del> <ins>…</ins>. */
.hf-variants__prices del {
	font-size: 14px;
	font-weight: 400;
	color: #9aa2a0;
	text-decoration: line-through;
}

.hf-variants__prices del .woocommerce-Price-amount {
	text-decoration: line-through;
}

.hf-variants__prices ins {
	font-size: 19px;
	font-weight: 700;
	color: var(--hf-ink);
	text-decoration: none;
	background: none;
}

.hf-variants__prices .woocommerce-Price-amount {
	white-space: nowrap;
}

.hf-variants__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border: 1px solid rgba(0, 76, 69, 0.12);
	border-radius: 999px;
	background-color: var(--hf-mint);
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	color: var(--hf-green);
	white-space: nowrap;
}

.hf-variants__tax {
	font-size: 12px;
	font-weight: 400;
	color: #8d9593;
}

/* Woo prints its own "please choose an option" reset link above the button. */
.woocommerce-variation-add-to-cart .reset_variations {
	display: none;
}

/* Single-variation price block, shown by Woo once a card is chosen. */
.woocommerce-variation-price {
	margin-bottom: 14px;
}

/* --------------------------------------------------------------- price --- */

/* Screen-reader duplicates of the sale price. Hello Elementor omits this rule. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.hf-price del {
	font-size: 0.62em;
	font-weight: 400;
	color: #9aa2a0;
	margin-right: 10px;
}

.hf-price ins {
	text-decoration: none;
	background: none;
}

.hf-price .woocommerce-price-suffix {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	color: var(--hf-muted);
}

/* ------------------------------------------------------- add to cart ----- */

/* On a variable product Woo nests the quantity and the button inside
   .woocommerce-variation-add-to-cart rather than directly in form.cart, so both
   need to be flex containers for the button to fill the row on either type. */
.hf-atc form.cart,
.hf-atc .woocommerce-variation-add-to-cart {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0;
}

/* Full nesting on a variable product is
   form.cart > .single_variation_wrap > .woocommerce-variation-add-to-cart,
   so the intermediate wrapper has to span the column too or the button row
   shrinks to its content width. */
.hf-atc .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
}

.hf-atc .quantity {
	display: flex;
	flex: 0 0 auto;
	/* Elementor's add-to-cart widget stylesheet sizes the input with
	   `height: 100%`, which resolves against this box. Without an explicit
	   height here that percentage collapses to the input's default 21px. */
	height: 52px;
}

.hf-atc .quantity input.qty {
	width: 102px;
	height: 52px;
	padding: 0 8px;
	border: 1px solid #d5dad9;
	border-radius: 30px;
	background-color: #fff;
	font-size: 16px;
	text-align: center;
	-moz-appearance: textfield;
}

.hf-atc .quantity input.qty::-webkit-outer-spin-button,
.hf-atc .quantity input.qty::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.hf-atc .single_add_to_cart_button {
	flex: 1 1 240px;
	min-height: 52px;
	padding: 0 32px;
	border: 0;
	border-radius: 30px;
	background-color: var(--hf-green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.hf-atc .single_add_to_cart_button:hover:not(:disabled) {
	background-color: var(--hf-green-dark);
}

.hf-atc .single_add_to_cart_button:active:not(:disabled) {
	transform: translateY(1px);
}

.hf-atc .single_add_to_cart_button:disabled,
.hf-atc .single_add_to_cart_button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Spinner while the AJAX request is in flight. */
.hf-atc .single_add_to_cart_button.loading {
	position: relative;
	color: transparent;
}

.hf-atc .single_add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hf-spin 0.6s linear infinite;
}

@keyframes hf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hf-atc .single_add_to_cart_button,
	.hf-variants__item {
		transition: none;
	}

	.hf-atc .single_add_to_cart_button.loading::after {
		animation-duration: 2s;
	}
}

/* --------------------------------------------------- delivery / trust ---- */

/* Sits under the gallery like the reference, as a quiet sand band. */
.hf-trust-band {
	background-color: var(--hf-sand);
	border-radius: 10px;
}

.hf-trust-band .elementor-icon-box-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

.hf-trust-band .elementor-icon-box-icon {
	margin: 0 !important;
	flex: 0 0 auto;
}

.hf-trust-band .elementor-icon-box-icon svg,
.hf-trust-band .elementor-icon-box-icon i {
	width: 16px;
	height: 16px;
	font-size: 16px;
}

.hf-trust-band .elementor-icon-box-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.hf-trust-band .elementor-icon-box-description {
	margin: 0;
	font-size: 12px;
	line-height: 1.35;
	color: var(--hf-muted);
}

/* ------------------------------------------------------------- gallery --- */

.hf-gallery .woocommerce-product-gallery__image img {
	border-radius: var(--hf-radius);
}

.hf-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

/* WooCommerce sizes these with `width: 25%` for its own float layout. As grid
   items that resolves against the track rather than the row, so every thumbnail
   collapsed to a quarter of its cell.
   `min-width` rather than a more specific `width`: Woo's selector is
   `.woocommerce div.product div.images .flex-control-thumbs li` and FlexSlider
   emits an <ol>, so out-specifying it here would take a brittle selector.
   min-width simply beats a smaller width, whatever the source. */
.hf-gallery .flex-control-thumbs li {
	min-width: 100%;
	margin: 0;
	float: none;
}

.hf-gallery .flex-control-thumbs img {
	width: 100%;
	height: auto;
}

.hf-gallery .flex-control-thumbs img {
	border: 1px solid #e4e7e6;
	border-radius: 10px;
	opacity: 1;
	cursor: pointer;
	transition: border-color 0.18s ease;
}

.hf-gallery .flex-control-thumbs img:hover {
	border-color: #b9c2bf;
}

.hf-gallery .flex-control-thumbs img.flex-active {
	border-color: var(--hf-green);
}

/* ---------------------------------------------------------------- tabs --- */

.hf-tabs .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 24px;
	padding: 0;
	border-bottom: 1px solid #e4e7e6;
	list-style: none;
}

.hf-tabs .woocommerce-tabs ul.tabs::before,
.hf-tabs .woocommerce-tabs ul.tabs::after {
	content: none;
}

.hf-tabs .woocommerce-tabs ul.tabs li {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.hf-tabs .woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 18px;
	border-bottom: 2px solid transparent;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.hf-tabs .woocommerce-tabs ul.tabs li.active a {
	border-bottom-color: var(--hf-green);
	color: var(--hf-green);
}

/* Woo repeats the tab name as the panel heading. */
.hf-tabs .woocommerce-Tabs-panel > h2:first-child {
	display: none;
}

.hf-tabs table.shop_attributes {
	width: 100%;
	border-collapse: collapse;
}

.hf-tabs table.shop_attributes th,
.hf-tabs table.shop_attributes td {
	padding: 12px 14px;
	border-bottom: 1px solid #eef1f0;
	font-size: 15px;
	text-align: left;
}

.hf-tabs table.shop_attributes th {
	width: 38%;
	font-weight: 700;
	color: var(--hf-ink);
}

.hf-tabs table.shop_attributes td {
	color: #4a524f;
}

.hf-tabs table.shop_attributes td p {
	margin: 0;
}

/* ------------------------------------------------------------ product meta */

.hf-meta {
	font-size: 14px;
	color: var(--hf-muted);
}

/* Elementor renders each fact as its own inline <span>, so without this the
   category and brand run together as "KategorieHanfölMarke:". */
.hf-meta .product_meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}

.hf-meta .sku_wrapper,
.hf-meta .posted_in,
.hf-meta .tagged_as,
.hf-meta .detail-container {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}

.hf-meta .detail-label {
	font-weight: 700;
	color: var(--hf-ink);
}

.hf-meta a {
	color: var(--hf-green);
}

/* ------------------------------------------------------------- related --- */

/* With nothing to recommend, Woo's widget prints nothing but the Elementor
   band around it still paints its background and padding, leaving an empty
   coloured strip above the footer. */
.hf-no-related .hf-related-band {
	display: none;
}

.hf-related ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hf-related ul.products::before,
.hf-related ul.products::after {
	content: none;
}

.hf-related ul.products li.product {
	width: auto;
	margin: 0;
	padding: 16px;
	border: 1px solid #e9eceb;
	border-radius: var(--hf-radius);
	background-color: #fff;
	text-align: center;
}

.hf-related ul.products li.product img {
	margin-bottom: 12px;
	border-radius: 10px;
}

.hf-related ul.products li.product .woocommerce-loop-product__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--hf-ink);
}

.hf-related ul.products li.product .button {
	display: inline-block;
	margin-top: 10px;
	padding: 12px 24px;
	border-radius: 30px;
	background-color: var(--hf-green);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

/* --------------------------------------------------------- slide cart ---- */

.elementor-menu-cart__container {
	transition: opacity 0.25s ease;
}

.elementor-menu-cart__main {
	box-shadow: -8px 0 32px rgba(0, 0, 0, 0.12);
}

.elementor-menu-cart__product {
	transition: opacity 0.2s ease;
}

/* ==========================================================================
 * RESPONSIVE
 * Breakpoints follow the Elementor kit: lg 1025, md 768.
 * ======================================================================= */

@media (max-width: 1024px) {
	.hf-related ul.products {
		grid-template-columns: repeat(2, 1fr);
	}

	.hf-variants__item {
		padding: 20px;
	}

	.hf-gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.hf-related ul.products {
		grid-template-columns: 1fr;
	}

	.hf-variants__item {
		padding: 16px;
		gap: 12px;
	}

	.hf-variants__name {
		font-size: 15px;
	}

	.hf-variants__prices ins {
		font-size: 17px;
	}

	.hf-variants__prices {
		gap: 8px;
	}

	.hf-gallery .flex-control-thumbs {
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}

	/* Full-width tap target on phones. */
	.hf-atc form.cart {
		gap: 12px;
	}

	.hf-atc .quantity,
	.hf-atc .quantity input.qty {
		height: 52px;
	}

	.hf-atc .quantity input.qty {
		width: 88px;
	}

	.hf-atc .single_add_to_cart_button {
		flex: 1 1 auto;
		padding: 0 20px;
	}

	.hf-tabs .woocommerce-tabs ul.tabs li a {
		padding: 10px 12px;
		font-size: 14px;
	}

	.hf-tabs table.shop_attributes th,
	.hf-tabs table.shop_attributes td {
		padding: 10px 8px;
		font-size: 14px;
	}

	.hf-tabs table.shop_attributes th {
		width: 44%;
	}
}

/* Narrow phones: let the price drop under the name rather than squeeze. */
@media (max-width: 420px) {
	.hf-variants__item {
		flex-wrap: wrap;
	}

	.hf-variants__pricing {
		width: 100%;
		align-items: flex-start;
		padding-left: 32px;
		text-align: left;
	}

	.hf-variants__prices {
		justify-content: flex-start;
	}

	.hf-variants__legend {
		font-size: 11px;
		padding: 5px 10px;
	}
}