/* ==========================================================================
   Quick View — Simplified (Black & Gold)
   -------------------------------------------------------------------------
   - Bỏ hiệu ứng chồng chất (glow nhiều lớp, quét laser, xoay icon...), đồng
     bộ đúng bảng màu/font toàn site (đen than — vàng đồng, Cormorant
     Garamond/Jost/JetBrains Mono).
   - Bỏ khối "Nationwide Shipping / Manufacturer Warranty" (đã xoá ở PHP).
   - Cột ảnh và khung ảnh bên trong dùng CHUNG 1 màu nền đen thật (--qv-void).
   - KHÔNG bo góc khung tổng thể (.qv-modern border-radius: 0) theo yêu cầu.
     Các phần tử nhỏ bên trong (ô số lượng, nút mua) vẫn giữ bo góc nhẹ cho
     dễ nhìn, không liên quan tới khung ngoài.
   - Nút đóng (X) dùng thêm class "mfp-close" để Magnific Popup tự nhận diện
     và đóng được — trước đó chỉ có data-close nên bấm không có tác dụng.
   - .mfp-content (lớp bọc ngoài do Magnific Popup tự tạo) bị ép nền trong
     suốt, phòng trường hợp có bo góc/viền ở khung ngoài trong tương lai thì
     không bị lộ nền trắng mặc định của thư viện.
   ========================================================================== */


/* Magnific Popup tự tạo 1 lớp bọc ngoài (.mfp-content) với nền TRẮNG mặc
   định, nằm ngoài .qv-modern — ép trong suốt để không bao giờ bị lộ màu
   trắng ở bất kỳ đâu quanh khung. */
.mfp-content,
.mfp-content > div,
.mfp-figure,
.white-popup {
	background: transparent !important;
}

.qv-modern {
	--qv-void: #0b0b0c;
	--qv-panel: #16161a;
	--qv-ink: #2a2a30;
	--qv-gold: #c9a24a;
	--qv-gold-hi: #e7cd86;
	--qv-cream: #f4f0e6;
	--qv-steel: #a8a296;
	--qv-hairline: rgba(255, 255, 255, 0.08);
	--qv-radius: 6px;
	--qv-font-display: 'Jost', 'Segoe UI', sans-serif;
	--qv-font-body: 'Jost', 'Segoe UI', sans-serif;
	--qv-font-mono: 'JetBrains Mono', 'Courier New', monospace;

	position: relative;
	background: var(--qv-void);
	color: var(--qv-cream);
	font-family: var(--qv-font-body);
	max-width: 980px;
	margin: 0 auto;
	border: 1px solid var(--qv-gold);
	border-radius: 0 !important;
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

.qv-modern * {
	box-sizing: border-box;
}

/* ---------- Close button ---------- */
.qv-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 20;
	width: 36px;
	height: 36px;
	border: 1px solid var(--qv-hairline);
	border-radius: 50%;
	background: var(--qv-panel);
	cursor: pointer;
	padding: 0;
	transition: border-color 0.25s ease, background 0.25s ease;
}

.qv-close:hover {
	border-color: var(--qv-gold);
	background: var(--qv-void);
}

.qv-close-line {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	background: var(--qv-steel);
	transform-origin: center;
	transition: background 0.25s ease;
}

.qv-close:hover .qv-close-line {
	background: var(--qv-gold-hi);
}

.qv-close-line:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.qv-close-line:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- Grid ---------- */
.qv-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

/* Thẻ .qv-gallery/.qv-info còn mang class .col/.large-6 của hệ lưới Flatsome,
   hệ lưới đó tự đặt sẵn padding riêng cho .col với độ ưu tiên cao hơn — ép
   !important để đảm bảo padding của mình luôn thắng, không bị đè mất. */
.qv-gallery,
.qv-info {
	padding: 40px !important;
	background: var(--qv-void) !important;
}
/* Cột thông tin bên phải cần đệm trái RIÊNG lớn hơn để nội dung không dính
   sát vào viền phân cách với ảnh, và đệm phải để nút Add to Cart không dính
   sát viền ngoài modal — 2 khối cần "thở" tách biệt rõ ở cả 2 phía */
.qv-info {
	padding-left: 52px !important;
	padding-right: 44px !important;
}

.qv-gallery {
	border-right: 1px solid var(--qv-hairline);
}

/* ---------- Gallery frame — CHUNG màu nền đen với cột phải, chỉ còn 1 viền
   mảnh để phân định khung, không có khung con màu xám gây lệch tông ---------- */
.qv-gallery-frame {
	position: relative;
	overflow: hidden;
	border-radius: var(--qv-radius);
	background: var(--qv-void);
	border: 1px solid var(--qv-ink);
	padding: 14px !important;
}

.qv-gallery-frame .slide img {
	width: 100% !important;
	height: auto;
	display: block;
	border-radius: 3px;
}

/* ---------- Sale badge — cùng kiểu pill với .dx-product__tag của theme ---------- */
.qv-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 6;
	font-family: var(--qv-font-mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
}

.qv-badge--sale {
	background: var(--qv-gold);
	color: var(--qv-void);
	font-weight: 500;
}

/* ---------- Slider nav / dots ---------- */
.qv-gallery .flickity-page-dots .dot {
	background: var(--qv-steel);
	opacity: 0.5;
}

.qv-gallery .flickity-page-dots .dot.is-selected {
	background: var(--qv-gold);
	opacity: 1;
}

.qv-gallery .flickity-prev-next-button {
	background: var(--qv-void);
	border: 1px solid var(--qv-hairline);
}

.qv-gallery .flickity-prev-next-button .arrow {
	fill: var(--qv-gold-hi);
}

.qv-gallery .flickity-prev-next-button:hover {
	background: var(--qv-gold);
}

.qv-gallery .flickity-prev-next-button:hover .arrow {
	fill: var(--qv-void);
}

/* ---------- Info column ---------- */
.qv-info {
	display: flex;
	align-items: center;
}

.qv-info-inner {
	width: 100%;
}

/* Eyebrow — cùng kiểu với .dx-eyebrow đang dùng ở trang chủ */
.qv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--qv-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--qv-gold);
	margin-bottom: 12px;
}
.qv-eyebrow::before {
	content: '';
	width: 20px;
	height: 1px;
	background: var(--qv-gold);
}

.qv-eyebrow a {
	color: var(--qv-gold);
}

.qv-title-link {
	text-decoration: none;
}

.qv-title {
	font-family: var(--qv-font-display) !important;
	font-weight: 600 !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
	color: var(--qv-cream) !important;
	margin: 0 0 12px !important;
}

/* ---------- Stock indicator ---------- */
.qv-stock {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--qv-font-mono);
	font-size: 12px;
	letter-spacing: 0.03em;
	margin-bottom: 18px;
	color: var(--qv-steel);
}

.qv-stock-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--qv-steel);
}

.qv-stock--instock .qv-stock-dot {
	background: #4ac97c;
}
.qv-stock--instock {
	color: #4ac97c;
}

.qv-stock--outofstock .qv-stock-dot {
	background: #e0554a;
}
.qv-stock--outofstock {
	color: #e0554a;
}

/* ---------- Summary block ---------- */
.qv-summary {
	padding-top: 18px;
	border-top: 1px solid var(--qv-hairline);
}

.qv-summary .price {
	font-family: var(--qv-font-mono) !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	color: var(--qv-gold) !important;
	display: block !important;
	margin-bottom: 14px !important;
	opacity: 1 !important;
}

.qv-summary .price * {
	color: var(--qv-gold) !important;
	opacity: 1 !important;
}

.qv-summary .price del,
.qv-summary .price del * {
	color: var(--qv-steel) !important;
	font-size: 14px !important;
	margin-right: 8px;
	opacity: 1 !important;
}

.qv-summary .price ins {
	text-decoration: none !important;
}

.qv-summary .woocommerce-product-details__short-description {
	font-size: 14px;
	line-height: 1.6;
	color: var(--qv-steel);
	margin-bottom: 20px;
}

.qv-summary .woocommerce-product-details__short-description * {
	color: var(--qv-steel);
}

/* Add-to-cart form */
.qv-summary form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-bottom: 4px;
}

.qv-summary .quantity input {
	width: 64px;
	height: 46px;
	border: 1px solid var(--qv-hairline);
	border-radius: var(--qv-radius);
	background: var(--qv-panel);
	color: var(--qv-cream);
	text-align: center;
	font-family: var(--qv-font-mono);
	font-size: 14px;
}

.qv-summary button.single_add_to_cart_button {
	flex: 1;
	min-width: 160px;
	height: 46px;
	border: none;
	border-radius: var(--qv-radius);
	background: linear-gradient(120deg, var(--qv-gold), var(--qv-gold-hi));
	color: var(--qv-void);
	font-family: var(--qv-font-mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: box-shadow 0.25s ease;
}

.qv-summary button.single_add_to_cart_button:hover {
	box-shadow: 0 10px 24px -8px rgba(201, 162, 74, 0.5);
}

/* ---------- Meta (SKU) ---------- */
.qv-meta {
	display: flex;
	gap: 6px;
	font-family: var(--qv-font-mono);
	font-size: 12px;
	color: var(--qv-steel);
	margin-top: 16px;
}

.qv-meta-label {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.75;
}

.qv-meta-value {
	color: var(--qv-cream);
}

/* ---------- View full product link ---------- */
.qv-view-full {
	display: inline-block;
	margin-top: 20px;
	font-size: 13px;
	color: var(--qv-gold);
	text-decoration: none;
	border-bottom: 1px solid var(--qv-ink);
	padding-bottom: 2px;
	transition: border-color 0.25s ease, color 0.25s ease;
}

.qv-view-full:hover {
	color: var(--qv-gold-hi);
	border-color: var(--qv-gold);
}

/* ---------- Responsive ---------- */
@media (max-width: 799px) {
	.qv-grid {
		flex-direction: column;
	}

	.qv-gallery {
		border-right: none;
		border-bottom: 1px solid var(--qv-hairline);
	}

	.qv-gallery,
	.qv-info {
		width: 100% !important;
		padding: 24px !important;
	}

	.qv-title {
		font-size: 17px !important;
	}

	.qv-summary .price {
		font-size: 19px !important;
	}
}

/* ---------- Focus visibility (accessibility) ---------- */
.qv-close:focus-visible,
.qv-view-full:focus-visible,
.qv-summary button.single_add_to_cart_button:focus-visible {
	outline: 2px solid var(--qv-gold);
	outline-offset: 2px;
}