/**
 * Product Labels Frontend Styles
 * Author: Yangze
 * 优化版本 - 不影响原有hover和图片缩放效果
 */

/* ============================================================================
   基础标签样式
   ============================================================================ */

/* Labels Container */
.ply-product-labels {
	position: absolute;
	top: 10px;
	left: 17px;
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
}

@media (min-width: 1025px) {
	.ply-product-labels {
		position: absolute;
		top: 10px;
		left: 2px;
		z-index: 50;
		display: flex;
		flex-direction: column;
		gap: 6px;
		pointer-events: none;
	}
}

/* Individual Label */
.ply-label {
	display: inline-block;
	padding: 5px 10px;
	font-family: 'Optima', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	line-height: 1.2;
	border-radius: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

/* Best Seller Label */
.ply-label.ply-best-seller {
	background: transparent;
	text-align: center;
	background-color: var(--bgcolor-white);
	color: var(--color-gray-900);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
}

/* New Label */
.ply-label.ply-new {
	background: transparent;
	text-align: center;
	background-color: var(--bgcolor-white);
	color: var(--color-gray-900);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
}

/* Washable Label */
.ply-label.ply-washable {
	background: transparent;
	text-align: center;
	background-color: var(--bgcolor-white);
	color: var(--color-gray-900);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
}

/* Hover Effects - 只移动标签，不影响图片 */
.product-grid-item:hover .ply-label {
	transform: translateX(2px);
}

/* ============================================================================
   容器定位
   ============================================================================ */

/* 列表页 - product-wrapper 容器 */
.product-wrapper:has(> .ply-product-labels) {
	position: relative;
}

/* 列表页 - product-grid-item 容器（支持owl-carousel等布局） */
.product-grid-item:has(> .ply-product-labels) {
	position: relative !important;
}

/* owl-carousel和slide-product容器支持 */
.slide-product .product-grid-item,
.owl-carousel .product-grid-item {
	position: relative !important;
}

/* 单品页面 - gallery 容器 */
.single-product .product-images:has(> .ply-product-labels),
.single-product .product-images-inner:has(> .ply-product-labels) {
	position: relative;
}

/* 备用方案：如果浏览器不支持:has */
.product-wrapper,
.product-grid-item,
.single-product .product-images,
.single-product .product-images-inner {
	position: relative;
}

/* ============================================================================
   标签位置定义
   ============================================================================ */

/* 列表页 - 标签在 product-wrapper 上 */
.product-wrapper>.ply-product-labels {
	position: absolute;
	top: 10px;
	left: 15px;
	z-index: 50;
}

/* 列表页 - 标签作为 product-grid-item 的直接子元素（owl-carousel等布局） */
.product-grid-item>.ply-product-labels {
	position: absolute !important;
	top: 10px !important;
	left: calc(var(--wd-sp) / 2) !important;
	z-index: 50 !important;
}

/* owl-carousel 特定样式 */
.owl-carousel .product-grid-item>.ply-product-labels,
.slide-product .product-grid-item>.ply-product-labels {
	position: absolute !important;
	top: 10px !important;
	left: calc(var(--wd-sp) / 2) !important;
	z-index: 50 !important;
}

/* 单品页面 - 标签在 gallery 容器上 */
.single-product .product-images>.ply-product-labels,
.single-product .product-images-inner>.ply-product-labels {
	position: absolute;
	top: 15px;
	left: 15px;
	z-index: 100;
}

/* ============================================================================
   响应式设计
   ============================================================================ */

/* Mobile Responsive */
@media (max-width: 767px) {
	.ply-product-labels {
		top: 8px;
		left: 8px;
		gap: 4px;
		z-index: 50;
	}

	.ply-label {
		padding: 4px 10px;
		font-size: 10px;
		letter-spacing: 1px;
	}

	.single-product .ply-product-labels {
		top: 10px;
		left: 17px;
	}

	.woocommerce-product-gallery__wrapper .ply-product-labels,
	.gallery__wrapper .ply-product-labels,
	.product-element-top>.ply-product-labels {
		position: absolute;
		top: 8px;
		left: 8px;
		z-index: 50;
	}
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.ply-label {
		font-size: 11px;
		padding: 5px 12px;
	}
}

/* ============================================================================
   兼容性处理
   ============================================================================ */

/* 确保与Woodmart原生标签兼容 */
.product-labels+.ply-product-labels {
	top: auto;
	bottom: 10px;
}

/* 当Woodmart标签存在时，调整位置 */
.product-wrapper .product-labels~.product-element-top .ply-product-labels {
	left: auto;
	right: 10px;
}

/* ============================================================================
   辅助功能
   ============================================================================ */

/* Print Styles */
@media print {
	.ply-product-labels {
		display: none;
	}
}

/* Accessibility */
.ply-label:focus {
	outline: 2px solid #4A90E2;
	outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: high) {
	.ply-label {
		border-width: 2px;
	}

	.ply-label.ply-best-seller {
		border-color: #ffffff;
	}

	.ply-label.ply-new {
		border-color: #ffffff;
	}

	.ply-label.ply-washable {
		border-color: #ffffff;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

	.ply-label,
	.product-grid-item:hover .ply-label {
		transition: none;
		transform: none;
	}
}