/**
 * PinPress Commerce styles.
 *
 * @package PinPress_Commerce
 */

/* Scrollbar thin utility */
.scrollbar-thin::-webkit-scrollbar {
	height: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
	background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 9999px;
}

/* Shop pins grid — CSS columns masonry */
#shop-pins-grid {
	column-count: 2;
	column-gap: 1rem;
}
@media (min-width: 640px) {
	#shop-pins-grid { column-count: 3; }
}
@media (min-width: 768px) {
	#shop-pins-grid { column-count: 4; }
}
@media (min-width: 1024px) {
	#shop-pins-grid { column-count: 5; }
}

/* ── Hotspot Alignment ───────────────────────────────── */

/*
 * The hotspot overlay (.pinpress-hotspots) uses absolute inset-0 to cover the image.
 * The image wrapper MUST have no inline baseline gap and no extra padding so
 * percentage-based coordinates match between admin (drawing) and frontend (display).
 */
.pinpress-pin-image-wrap {
	font-size: 0;
	line-height: 0;
}

.pinpress-pin-image-wrap > img,
.pinpress-pin-image-wrap > video {
	display: block;
	width: 100%;
	height: auto;
}

.pinpress-hotspots {
	/* Reset font/line so text inside hotspot buttons renders correctly */
	font-size: 14px;
	line-height: 1.4;
}

/* Hotspot dot pulse animation */
.pinpress-hotspot-dot span {
	animation: hotspot-pulse 2s infinite;
}
@keyframes hotspot-pulse {
	0% { opacity: 1; }
	50% { opacity: 0.5; }
	100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.pinpress-hotspot-dot span {
		animation: none;
	}
}

/* Region highlight on hotspot hover/click */
.pinpress-hotspot-region {
	transition: opacity 200ms ease;
}
@media (prefers-reduced-motion: reduce) {
	.pinpress-hotspot-region {
		transition: none;
	}
}

/* Product strip scrollbar hiding */
.pp-strip-scroll::-webkit-scrollbar {
	display: none;
}

/* Product strip scroll snap */
.product-strip-scroll {
	scroll-snap-type: x mandatory;
}
.product-strip-scroll > * {
	scroll-snap-align: start;
}

/* ── Product Hotspot Panel ──────────────────────────── */

/* Panel open state — cubic-bezier for natural spring feel */
.pp-panel-inner.pp-panel-open {
	transform: translateX(0) !important;
}

/* Mobile: override to translateY */
@media (max-width: 767px) {
	.pp-panel-inner.pp-panel-open {
		transform: translateY(0) !important;
	}
}

/* Pin image dim when panel open */
.pp-panel-dimmed > img,
.pp-panel-dimmed > video {
	filter: brightness(0.6);
	transition: filter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Region active highlight — animate in */
.pp-region-active {
	border-color: rgba(255, 255, 255, 0.8) !important;
	background: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
	transition: all 0.2s ease;
}

/* Shop hint pulse animation */
@keyframes ppShopHintPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.08); opacity: 0.85; }
}

/* Panel CTA — elevated with glow */
.pp-panel-cta:focus-visible {
	outline: 2px solid #0074e8;
	outline-offset: 2px;
}
.pp-panel-cta:active {
	transform: scale(0.98);
}

/* Panel close button focus */
.pp-panel-close:focus-visible {
	outline: 2px solid #0074e8;
	outline-offset: 2px;
}

/* Panel dot — pill shape for active, circle for inactive */
.pp-panel-dot {
	transition: all 0.2s ease;
}
.pp-panel-dot:focus-visible {
	outline: 2px solid #0074e8;
	outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.pp-panel-inner {
		transition: none !important;
	}
	.pp-panel-dimmed > img,
	.pp-panel-dimmed > video {
		transition: none;
	}
	.pp-panel-cta:active {
		transform: none;
	}
}

/* Panel dot focus */
.pp-panel-dot:focus-visible {
	outline: 2px solid #0074e8;
	outline-offset: 2px;
}

/* Shopping list bookmark toggle */
.pp-list-saved {
	color: var(--color-primary, #cc0000);
}

.pp-list-saved .pp-list-icon {
	fill: currentColor;
}

/* Stock status badges */
.pp-stock-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 500;
	padding: 1px 6px;
	border-radius: 4px;
}

.pp-stock-in {
	background: #e6f5e9;
	color: #00a32a;
}

.pp-stock-low {
	background: #fff3e0;
	color: #e65100;
}

.pp-stock-out {
	background: #fce4ec;
	color: #c62828;
}

/* Strikethrough for sale prices (Tailwind may not compile this if plugin not in content scan) */
.line-through {
	text-decoration: line-through;
}