/* Epicode WooCommerce Image Hotspot — frontend.
 * Pin + popup styling modelled on soul-flower.com's "Shop The Look":
 * white rounded-square pin with a black plus icon (rotates 45deg into an
 * x when open) and a soft pulsing halo; compact white product card with
 * the image on top and the product info below.
 */

.ewih-hotspot {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.ewih-hotspot__image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

/* Pin ----------------------------------------------------------------- */

.ewih-hotspot__pin-wrap {
	position: absolute;
	transform: translate(-50%, -50%);
	line-height: normal;
	z-index: 5;
}

.ewih-hotspot__pin-wrap.is-open {
	z-index: 10;
}

.ewih-hotspot__pin {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	border: 0;
	border-radius: 8px;
	background-color: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/* Pulsing halo behind the pin. */
.ewih-hotspot__pin::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: rgba(255, 255, 255, 0.9);
	transform: translate(-50%, -50%);
	animation: ewih-pulse 1.7s ease-in-out infinite;
	z-index: -1;
}

.ewih-hotspot__pin-icon {
	width: 16px;
	height: 16px;
	fill: #000;
	transition: transform 0.3s ease;
}

/* Open: the plus rotates into a close (x) icon. */
.ewih-hotspot__pin-wrap.is-open .ewih-hotspot__pin-icon {
	transform: rotate(45deg);
}

.ewih-hotspot__pin-wrap.is-open .ewih-hotspot__pin::before {
	animation: none;
}

@keyframes ewih-pulse {
	0% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.8;
	}
	50% {
		transform: translate(-50%, -50%) scale(1.4);
		opacity: 0.5;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0.8;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ewih-hotspot__pin::before {
		animation: none;
	}

	.ewih-hotspot__pin-icon,
	.ewih-hotspot__popup {
		transition: none;
	}

	.ewih-hotspot__popup {
		scale: 1;
	}
}

/* Popup: image on top, product info below ------------------------------ */

.ewih-hotspot__popup {
	position: absolute;
	width: 160px;
	max-width: 70vw;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.22);
	z-index: 20;

	/* Fades in on open. `scale` is its own property here rather than part of
	   transform, which the is-above/is-left flips already own. */
	opacity: 0;
	scale: 0.96;
	pointer-events: none;
	transition: opacity 0.25s ease, scale 0.25s ease;
}

.ewih-hotspot__pin-wrap.is-open .ewih-hotspot__popup {
	opacity: 1;
	scale: 1;
	pointer-events: auto;
}

/* Grow away from the pin rather than from the card's middle. */
.ewih-hotspot__popup.is-right.is-below { transform-origin: left top; }
.ewih-hotspot__popup.is-right.is-above { transform-origin: left bottom; }
.ewih-hotspot__popup.is-left.is-below { transform-origin: right top; }
.ewih-hotspot__popup.is-left.is-above { transform-origin: right bottom; }

.ewih-hotspot__popup.is-right {
	left: calc(100% + 10px);
}

.ewih-hotspot__popup.is-left {
	right: calc(100% + 10px);
}

.ewih-hotspot__popup.is-below {
	top: 50%;
	transform: translateY(-24px);
}

.ewih-hotspot__popup.is-above {
	bottom: 50%;
	transform: translateY(24px);
}

.ewih-hotspot__popup-link {
	display: flex;
	flex-direction: column;
	padding: 10px;
	text-decoration: none;
	color: inherit;
}

.ewih-hotspot__popup-image {
	display: block;
	padding-bottom: 10px;
}

.ewih-hotspot__popup-image img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
}

.ewih-hotspot__popup-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.ewih-hotspot__popup-title {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	color: #3a4631;
}

.ewih-hotspot__popup-price {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: #3a4631;
}

/* Sale price: no underline on the new price (<ins>), smaller old price. */
.ewih-hotspot__popup-price ins {
	text-decoration: none;
}

.ewih-hotspot__popup-price del {
	font-size: 12px;
	opacity: 0.55;
	margin-right: 4px;
}

.ewih-hotspot__popup-link:hover .ewih-hotspot__popup-title {
	text-decoration: underline;
}

/* "Add all to cart" ---------------------------------------------------- */

/* Sits below the image inside the inline-block wrapper, so it inherits the
   image's width. The wrapper sets line-height: 0 for the image; undo it here. */
.ewih-hotspot__actions {
	line-height: normal;
	margin-top: 12px;
	text-align: center;
}

/* Same brand recipe as the theme's .btn-secondary. */
.ewih-hotspot__add-all {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.75rem 2rem;
	border: 0;
	border-radius: 9999px;
	background-color: #b3996f;
	color: #fff;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.2s ease-out;
	-webkit-appearance: none;
	appearance: none;
}

.ewih-hotspot__add-all:hover {
	background-color: #a1855c;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.ewih-hotspot__add-all:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ewih-hotspot__add-all:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #b3996f;
}

.ewih-hotspot__add-all:disabled {
	opacity: 0.6;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.ewih-hotspot__add-all {
		transition: none;
	}
}


/* Small screens: centre the popup under the pin instead of side-flipping. */
@media (max-width: 480px) {
	.ewih-hotspot__popup.is-left,
	.ewih-hotspot__popup.is-right {
		left: 50%;
		right: auto;
	}

	.ewih-hotspot__popup.is-below {
		top: calc(100% + 10px);
		transform: translateX(-50%);
	}

	.ewih-hotspot__popup.is-above {
		bottom: calc(100% + 10px);
		transform: translateX(-50%);
	}
}

/* "Shop the look" modal -------------------------------------------------- *
 * Patterned on the theme's product quick view (.phent-quickview): same
 * overlay tint, box sizing and two-phase fade/slide transition, and the
 * same brand button + select treatment. Written as plain CSS because the
 * theme's Tailwind build does not scan plugin files.
 */

.ewih-modal[hidden] {
	display: none;
}

.ewih-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	line-height: normal;
}

/* A closed modal must never intercept the page: if `hidden` is lost (block
   editor previews strip boolean attributes) the transparent overlay would
   otherwise swallow clicks and wheel events across the whole viewport. */
.ewih-modal:not(.is-open) {
	pointer-events: none;
}

body.ewih-modal-open {
	overflow: hidden;
}

.ewih-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(11, 11, 11, 0.6);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ewih-modal__scroll {
	position: relative;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	overflow-y: auto;
	padding: 24px;
}

.ewih-modal__box {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 640px;
	max-height: 665px;
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2);
	opacity: 0;
	transform: translateY(-30px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ewih-modal.is-open .ewih-modal__overlay {
	opacity: 1;
}

.ewih-modal.is-open .ewih-modal__box {
	opacity: 1;
	transform: translateY(0);
}

.ewih-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #737373;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ewih-modal__close:hover {
	color: #262626;
	opacity: 1;
}

.ewih-modal__header {
	padding: 20px 48px 12px 24px;
}

.ewih-modal__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #222;
}

.ewih-modal__form {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.ewih-modal__items {
	overflow-y: auto;
	padding: 0 24px;
}

.ewih-modal__item {
	display: grid;
	grid-template-columns: auto 72px 1fr;
	align-items: start;
	gap: 14px;
	padding: 16px 0;
	border-bottom: 1px solid rgba(34, 34, 34, 0.08);
}

.ewih-modal__item:last-child {
	border-bottom: 0;
}

.ewih-modal__item.is-unavailable,
.ewih-modal__item.is-skipped {
	opacity: 0.5;
}

.ewih-modal__item-select {
	display: flex;
	align-items: center;
	min-width: 20px;
	padding-top: 4px;
}

/* Same box as the theme's FacetWP filter checkboxes: bordered white square
   that fills with the brand colour and a white tick when selected. */
.ewih-modal__item-toggle {
	display: block;
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	padding: 0;
	border: 1px solid #d4d4d4;
	border-radius: 4px;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 10px 10px;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ewih-modal__item-toggle:hover {
	border-color: #a3a3a3;
}

.ewih-modal__item-toggle:checked {
	background-color: #b3996f;
	border-color: #b3996f;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5 4.5 9 10 3.5'/%3E%3C/svg%3E");
}

.ewih-modal__item-toggle:focus-visible {
	outline: none;
	border-color: #b3996f;
	box-shadow: 0 0 0 2px rgba(179, 153, 111, 0.35);
}

.ewih-modal__item-image img {
	display: block;
	width: 72px;
	height: 90px;
	object-fit: cover;
	border-radius: 0.375rem;
	border: 1px solid rgba(34, 34, 34, 0.08);
}

/* Two-column grid so each attribute's label sits beside its dropdown (the
   quick view's variations orientation). Everything that isn't part of a
   label/select pair spans the full row; the pairs then auto-place one per
   row, which also handles products with more than one attribute. */
.ewih-modal__item-body {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 10px;
	min-width: 0;
}

.ewih-modal__item-title,
.ewih-modal__item-price,
.ewih-modal__item-flag,
.ewih-modal__item-error {
	grid-column: 1 / -1;
}

.ewih-modal__item-title {
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.3;
	color: #222;
	text-decoration: none;
}

.ewih-modal__item-title:hover {
	text-decoration: underline;
}

.ewih-modal__item-price {
	font-size: 0.9rem;
	font-weight: 400;
	color: #222;
}

.ewih-modal__item-price ins {
	text-decoration: none;
}

.ewih-modal__item-price del {
	font-size: 0.8rem;
	opacity: 0.55;
	margin-right: 4px;
}

/* Stock flag mirrors the theme's p.stock badge recipe. */
.ewih-modal__item-flag {
	display: inline-flex;
	width: max-content;
	align-items: center;
	margin-top: 4px;
	padding: 6px 8px;
	border-radius: 0.25rem;
	background: #dc2626;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* The label and its select carry the same margin-top so the attribute row
   clears the price without the two falling out of line with each other. */
.ewih-modal__item-label {
	margin-top: 4px;
	font-size: 0.9rem;
	font-weight: 400;
	color: #222;
	white-space: nowrap;
}

/* Same select treatment as the quick view's variation dropdowns. */
.ewih-modal__item-attribute {
	width: 100%;
	max-width: 300px;
	height: 40px;
	margin: 4px 0 0;
	padding: 0 2.5rem 0 0.75rem;
	border: 1px solid rgba(34, 34, 34, 0.1);
	border-radius: 0.375rem;
	background-color: #f5f5f5;
	font-size: 0.875rem;
	font-weight: 500;
	color: #222;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M12 17.17C11.343 17.1712 10.6921 17.0428 10.0847 16.7923C9.47728 16.5418 8.92519 16.174 8.46 15.71L0.290002 7.54C0.101699 7.3517 -0.00408936 7.0963 -0.00408936 6.83C-0.00408936 6.5637 0.101699 6.3083 0.290002 6.12C0.478306 5.9317 0.733701 5.82591 1 5.82591C1.2663 5.82591 1.5217 5.9317 1.71 6.12L9.88 14.29C10.4425 14.8518 11.205 15.1674 12 15.1674C12.795 15.1674 13.5575 14.8518 14.12 14.29L22.29 6.12C22.4783 5.9317 22.7337 5.82591 23 5.82591C23.2663 5.82591 23.5217 5.9317 23.71 6.12C23.8983 6.3083 24.0041 6.5637 24.0041 6.83C24.0041 7.0963 23.8983 7.3517 23.71 7.54L15.54 15.71C15.0748 16.174 14.5227 16.5418 13.9153 16.7923C13.3079 17.0428 12.6571 17.1712 12 17.17Z" fill="%23222222"/></svg>');
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 10px 10px;
}

.ewih-modal__item-attribute:focus {
	outline: none;
	background-color: #fff;
	border-color: #dac5a9;
}

.ewih-modal__item.has-error .ewih-modal__item-attribute {
	border-color: #dc2626;
}

.ewih-modal__item-error {
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: #dc2626;
}

.ewih-modal__item-error:empty {
	display: none;
}

.ewih-modal__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 16px 24px 20px;
	border-top: 1px solid rgba(34, 34, 34, 0.08);
	background: #fff;
}

.ewih-modal__feedback {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	text-align: center;
	color: #222;
}

.ewih-modal__feedback:empty {
	display: none;
}

.ewih-modal__feedback.is-error {
	color: #dc2626;
}

/* Same recipe as the theme's .single_add_to_cart_button. */
.ewih-modal__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 220px;
	height: 48px;
	padding: 0 2rem;
	border: 0;
	border-radius: 9999px;
	background-color: #b3996f;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.ewih-modal__submit:hover {
	background-color: #a1855c;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ewih-modal__submit:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Fallback when the theme doesn't ship WordPress's own utility class. */
.ewih-modal .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.ewih-modal__overlay,
	.ewih-modal__box {
		transition: none;
	}
}

@media (max-width: 767px) {
	.ewih-modal__scroll {
		padding: 12px;
	}

	.ewih-modal__item {
		grid-template-columns: auto 60px 1fr;
	}

	.ewih-modal__item-image img {
		width: 60px;
		height: 76px;
	}

	.ewih-modal__submit {
		width: 100%;
		height: 40px;
	}
}