/* Uses the theme's own colours and fonts, so a theme change carries over. */

.woocommerce ul.products li.product {
	background: var(--wp--preset--color--neutral, #f5f1eb);
	border-radius: 20px;
	padding: 16px;
	box-sizing: border-box;
	text-align: center;
}

.woocommerce ul.products li.product a img {
	border-radius: 12px;
	margin-bottom: 12px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title {
	font-family: var(--wp--preset--font-family--heading, cursive);
	font-weight: 400;
	color: var(--wp--preset--color--primary, #00637e);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-size: 1.5rem;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--wp--preset--color--primary, #00637e);
	font-weight: 700;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background: var(--wp--preset--color--primary, #00637e);
	color: #fff;
	border-radius: 9px;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background: var(--wp--preset--color--secondary, #64c2c8);
	color: var(--wp--preset--color--text-primary, #001820);
}

/* "Akció!" badge: white Playball lettering on a burgundy circle,
   placed inside the card so it never sticks out past the screen edge.
   The extra "body" outranks WooCommerce's own stylesheet, which loads after this file. */
body .woocommerce ul.products li.product .onsale,
body .woocommerce span.onsale {
	top: 10px;
	right: 10px;
	left: auto;
	margin: 0;
	min-width: 62px;
	min-height: 62px;
	line-height: 58px;
	padding: 0 6px;
	box-sizing: border-box;
	background: #902039;
	border: 2px solid #902039;
	color: #fff;
	font-family: var(--wp--preset--font-family--heading, "Playball", cursive);
	font-weight: 400;
	font-size: 1.15rem;
	box-shadow: 0 3px 10px rgba(144, 32, 57, 0.15);
}

/* On phones the products stack in one column instead of WooCommerce's two.
   The extra "body" outranks woocommerce-smallscreen.css, which loads after this file. */
@media (max-width: 600px) {
	body .woocommerce ul.products[class*="columns-"] li.product,
	body.woocommerce-page ul.products[class*="columns-"] li.product {
		width: 100%;
		float: none;
		clear: both;
		margin-right: 0;
	}
}

/* Product photo: a slow, slight zoom on hover; a click opens the large image. */
.woocommerce div.product .woocommerce-product-gallery__image {
	overflow: hidden;
	border-radius: 12px;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	transition: transform 0.6s ease;
	cursor: zoom-in;
}

.woocommerce div.product .woocommerce-product-gallery__image:hover img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce div.product .woocommerce-product-gallery__image img {
		transition: none;
	}
}

/* Variation choice: radio buttons with a heading instead of a dropdown. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr,
.woocommerce div.product form.cart .variations td {
	display: block;
	padding: 0;
	border: 0;
}

.woocommerce div.product form.cart .variations th.label,
.eletfa-choice-select {
	display: none;
}

.eletfa-choice {
	border: 0;
	margin: 0 0 16px;
	padding: 0;
}

.eletfa-choice legend {
	font-weight: 700;
	margin-bottom: 10px;
	padding: 0;
	color: var(--wp--preset--color--primary, #00637e);
}

.eletfa-choice__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 8px 8px 0;
	padding: 10px 18px;
	border: 2px solid var(--wp--preset--color--neutral, #f5f1eb);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.eletfa-choice__option input {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--wp--preset--color--primary, #00637e);
	cursor: pointer;
}

.eletfa-choice__option:hover,
.eletfa-choice__option:has(input:checked) {
	border-color: var(--wp--preset--color--primary, #00637e);
}

.eletfa-choice__option:has(input:checked) {
	background: var(--wp--preset--color--neutral, #f5f1eb);
}

.eletfa-choice__option:has(input:focus-visible) {
	outline: 2px solid var(--wp--preset--color--primary, #00637e);
	outline-offset: 2px;
}

.eletfa-choice__price {
	color: var(--wp--preset--color--primary, #00637e);
	font-weight: 700;
	white-space: nowrap;
}

.eletfa-choice__price del {
	font-weight: 400;
	opacity: 0.6;
	margin-right: 4px;
}

.eletfa-choice__price ins {
	text-decoration: none;
}

.eletfa-choice__option:has(input:disabled) {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Pressing the pale button before choosing turns the missing choice's heading burgundy with a little nudge. */
.eletfa-choice legend {
	transition: color 0.3s ease;
}

.eletfa-choice.is-missing legend {
	color: #8b1e3f;
	animation: eletfa-nudge 0.5s ease;
}

@keyframes eletfa-nudge {
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	.eletfa-choice.is-missing legend {
		animation: none;
	}
}

/* Fiókom → Meséim: one card per album with a player and its stories. */
.eletfa-mesek {
	display: grid;
	gap: 24px;
}

.eletfa-mesek__note {
	font-size: 0.9em;
	opacity: 0.75;
}

.eletfa-album {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 20px;
	align-items: start;
	padding: 20px;
	border-radius: 20px;
	background: var(--wp--preset--color--neutral, #f5f1eb);
}

.eletfa-album__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.eletfa-album h3 {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--heading, cursive);
	font-weight: 400;
	color: var(--wp--preset--color--primary, #00637e);
}

.eletfa-album__player {
	width: 100%;
	margin-bottom: 12px;
}

.eletfa-album__tracks {
	margin: 0;
	padding-left: 1.4em;
}

.eletfa-album__tracks button {
	padding: 6px 4px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.eletfa-album__tracks button:hover,
.eletfa-album__tracks button.is-current {
	color: var(--wp--preset--color--primary, #00637e);
	font-weight: 700;
}

@media (max-width: 600px) {
	.eletfa-album {
		grid-template-columns: 1fr;
	}

	.eletfa-album__cover {
		max-width: 220px;
	}
}

.woocommerce div.product .woocommerce-tabs audio {
	width: 100%;
	max-width: 480px;
}