/* Clean Wishlist - Myntra Style */

/* ---- Archive Button ---- */
.jmcw-btn {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fff;
	border: none;
	border-top: 1px solid #eaeaec;
	cursor: pointer;
	padding: 12px 10px;
	font-size: 13px;
	font-weight: 700;
	color: #282c3f;
	letter-spacing: 0.5px;
	box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
	transition: opacity 0.2s, transform 0.2s, background 0.2s, color 0.2s;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
}
.product:hover .jmcw-btn,
.product-thumb:hover .jmcw-btn,
.jmcw-btn.jmcw-active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.jmcw-btn:hover {
	background: #f9f9f9;
}
.jmcw-heart {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #282c3f;
	stroke-width: 1.8;
	transition: fill 0.2s, stroke 0.2s;
}
.jmcw-active .jmcw-heart,
.jmcw-btn:hover .jmcw-heart { stroke: #282c3f; }
.jmcw-active .jmcw-heart { fill: #282c3f; }
.product-thumb > a.image { position: relative; }

/* ---- Single Button ---- */
.jmcw-single-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 20px;
	margin-top: 12px;
	background: #fff;
	border: 1px solid #d4d5d9;
	border-radius: 2px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	color: #282c3f;
	text-transform: uppercase;
	transition: border-color 0.2s, color 0.2s;
}
.jmcw-single-btn:hover, .jmcw-single-btn.jmcw-active {
	border-color: #282c3f;
	color: #282c3f;
}

/* ---- Wishlist Page ---- */
.jmcw-page { max-width: 1280px; margin: 0 auto; padding: 20px 16px 60px; }
.jmcw-page-header { border-bottom: 1px solid #eaeaec; padding-bottom: 16px; margin-bottom: 24px; }
.jmcw-page-title { font-size: 20px; font-weight: 700; color: #282c3f; margin: 0; display: flex; gap: 8px; }
.jmcw-total-count { font-size: 14px; font-weight: 400; color: #94969f; }

.jmcw-empty-state { text-align: center; padding: 80px 20px; }
.jmcw-empty-state h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.jmcw-empty-state p { font-size: 14px; color: #94969f; margin-bottom: 24px; }
.jmcw-empty-cta { display: inline-block; padding: 14px 48px; background: #282c3f; color: #fff; font-weight: 700; text-transform: uppercase; text-decoration: none; border-radius: 2px; }

.jmcw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.jmcw-card { position: relative; background: #fff; border: 1px solid #eaeaec; display: flex; flex-direction: column; transition: box-shadow 0.2s; }
.jmcw-card:hover { box-shadow: 0 4px 16px rgba(40,44,63,0.12); }
.jmcw-card.removing { animation: fade-out 0.3s forwards; }
@keyframes fade-out { to { opacity: 0; transform: scale(0.96); } }

.jmcw-card-remove { position: absolute; top: 8px; right: 8px; z-index: 10; width: 26px; height: 26px; background: rgba(255,255,255,0.95); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.1); transition: background 0.2s; padding: 0; }
.jmcw-card-remove:hover { background: #282c3f; }
.jmcw-card-remove:hover svg { fill: #fff !important; }
.jmcw-card-remove svg { width: 14px; height: 14px; fill: #282c3f !important; display: block; }

.jmcw-card-img-wrap { display: block; position: relative; aspect-ratio: 3/4; overflow: hidden; }
.jmcw-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.jmcw-card:hover .jmcw-card-img-wrap img { transform: scale(1.04); }

.jmcw-card-body { padding: 10px 12px 4px; flex: 1; }
.jmcw-card-brand { font-size: 13px; font-weight: 700; color: #282c3f; text-transform: uppercase; margin: 0 0 4px; }
.jmcw-card-title { font-size: 13px; color: #535766; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.jmcw-card-price { font-size: 14px; font-weight: 700; color: #282c3f; }

.jmcw-card-actions { padding: 10px 12px 12px; }
.jmcw-card-atc { display: block; width: 100%; text-align: center; padding: 10px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border: 1px solid #282c3f; color: #282c3f; background: #fff; cursor: pointer; transition: 0.2s; }
.jmcw-card-atc:hover:not(:disabled) { background: #282c3f; color: #fff; }

/* ---- Toast Notification (Top Right) ---- */
.jmcw-toast {
	position: fixed;
	top: 24px;
	right: 24px;
	transform: translateY(-40px);
	background: #282c3f;
	color: #fff;
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 500;
	z-index: 999999;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.jmcw-toast.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.jmcw-toast-img { width: 32px; height: 40px; object-fit: cover; border-radius: 2px; }
.jmcw-toast-content { display: flex; align-items: center; gap: 16px; }
.jmcw-toast-btn { background: #03a685; color: #fff !important; padding: 6px 12px; border-radius: 2px; font-size: 11px; font-weight: 700; text-decoration: none; letter-spacing: 0.5px; transition: 0.2s; }
.jmcw-toast-btn:hover { background: #02876b; }

/* ---- Quick View Size Modal ---- */
.jmcw-modal { display: none; position: fixed; inset: 0; z-index: 9999; align-items: center; justify-content: center; }
.jmcw-modal.active { display: flex; }
.jmcw-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.jmcw-modal-content { position: relative; background: #fff; border-radius: 2px; width: 90%; max-width: 700px; display: flex; flex-direction: column; overflow: hidden; animation: slide-up 0.3s; }
@keyframes slide-up { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.jmcw-modal-close { position: absolute; top: 16px; right: 16px; background: #f5f5f6; border: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; font-size: 26px; line-height: 1; font-weight: 300; color: #282c3f; z-index: 10; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.jmcw-modal-close:hover { background: #eaeaec; }
.jmcw-modal-body { display: flex; flex: 1; padding: 20px; gap: 40px; }
.jmcw-modal-image { width: 250px; flex-shrink: 0; aspect-ratio: 3/4; }
.jmcw-modal-image img { width: 100%; height: 100%; object-fit: cover; }
.jmcw-modal-details { flex: 1; display: flex; flex-direction: column; }
.jmcw-modal-details h2 { font-size: 18px; font-weight: 700; color: #282c3f; margin: 0 0 10px; }
.jmcw-modal-price { font-size: 18px; font-weight: 700; margin-bottom: 24px; display: flex; align-items: baseline; gap: 8px; }
.jmcw-modal-price .screen-reader-text { display: none; }
.jmcw-modal-price del { font-size: 14px; font-weight: 400; color: #94969f; text-decoration: line-through; }
.jmcw-modal-price ins { text-decoration: none; color: #282c3f; }
.jmcw-modal-sizes { margin-bottom: 24px; }
.jmcw-size-title { font-size: 13px; font-weight: 700; text-transform: uppercase; margin-bottom: 12px; display: block; }
.jmcw-size-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.jmcw-size-btn { color: #282c3f; border: 1px solid #d4d5d9; padding: 12px 16px; background: #fff; cursor: pointer; border-radius: 40px; font-size: 14px; min-width: 50px; text-align: center; transition: 0.2s; }
.jmcw-size-btn:hover { border-color: #282c3f; color: #282c3f; background: #fff; }
.jmcw-size-btn.active { border-color: #282c3f; background: #282c3f; color: #fff; }
.jmcw-size-btn.jmcw-size-oos { color: #d4d5d9; text-decoration: line-through; cursor: not-allowed; border-color: #eaeaec; background: #f9f9f9; pointer-events: none; }

.jmcw-modal-atc { padding: 14px; font-size: 14px; font-weight: 700; background: #282c3f; color: #fff; border: none; cursor: pointer; border-radius: 2px; margin-top: auto; }
.jmcw-modal-atc:disabled { opacity: 0.6; cursor: not-allowed; }

@media (max-width: 768px) {
	.jmcw-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.jmcw-modal-body { flex-direction: column; gap: 20px; padding: 16px; }
	.jmcw-modal-image { width: 100%; height: 250px; }
	.jmcw-btn { opacity: 1; transform: translateY(0); pointer-events: auto; }
}

/* Hide theme's default hover "Select Options" / Add to Cart banner */
.product .product-buttons-wrapper,
.product-thumb .product-buttons-wrapper,
.product .wc_inline_buttons,
.product-thumb .wc_inline_buttons,
.product .product-button,
.product-thumb .product-button,
.product-thumb-content {
	display: none !important;
}