/* =========================================================
   AESTHETICZ PRODUCT EXPERIENCE — apx-quick-view.css
   Namespaced apx-qv- throughout. Redeclares the same --dlx-* variable
   values used sitewide so this works standalone on any page.
   ========================================================= */

:root{
	--dlx-bg:#FFF9FC; --dlx-card:#FFFFFF;
	--dlx-lilac:#B58BFF; --dlx-lilac-soft:#EAD9FF;
	--dlx-pink:#FF7DBA; --dlx-pink-soft:#FFE6F1;
	--dlx-accent:#7C5CFF; --dlx-text:#2E2434; --dlx-text-soft:#6E6178;
	--dlx-border:rgba(46,36,52,0.10);
	--dlx-radius-md:22px; --dlx-radius-lg:32px;
	--dlx-ease:cubic-bezier(.22,1,.36,1);
}
html[data-dlx-theme="dark"]{
	--dlx-bg:#121017; --dlx-card:#1C1824;
	--dlx-lilac:#C7A4FF; --dlx-pink:#FF9BC8; --dlx-accent:#D7C2FF;
	--dlx-text:#FFFFFF; --dlx-text-soft:#BDB3C9;
	--dlx-border:rgba(255,255,255,0.12);
}

.apx-qv-overlay{
	position: fixed; inset: 0; z-index: 100000;
	background: hsla(270, 30%, 12%, .45);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	display: flex; align-items: center; justify-content: center; padding: 3vh 3vw;
	opacity: 0; visibility: hidden;
	transition: opacity .4s var(--dlx-ease), visibility .4s var(--dlx-ease);
	font-family: 'Poppins', sans-serif;
}
.apx-qv-overlay.apx-qv-open{ opacity: 1; visibility: visible; }
.apx-qv-overlay *, .apx-qv-overlay *::before, .apx-qv-overlay *::after{ box-sizing: border-box; }

.apx-qv-modal{
	background: hsla(0,0%,100%,.75);
	backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
	border: 1px solid hsla(0,0%,100%,.6);
	border-radius: var(--dlx-radius-lg);
	width: min(1100px, 100%);
	max-height: 94vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 40px 90px -30px rgba(46,36,52,.5);
	transform: scale(.94) translateY(20px);
	transition: transform .45s var(--dlx-ease);
	padding: 2.5rem;
}
html[data-dlx-theme="dark"] .apx-qv-modal{ background: hsla(255,15%,10%,.75); border-color: hsla(255,20%,40%,.35); }
.apx-qv-overlay.apx-qv-open .apx-qv-modal{ transform: scale(1) translateY(0); }

.apx-qv-close{
	position: absolute; top: 1.4rem; right: 1.4rem; z-index: 5;
	width: 40px; height: 40px; border-radius: 50%;
	background: hsla(0,0%,100%,.6); color: var(--dlx-text); font-size: 1.5rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: transform .3s ease, background .3s ease;
}
.apx-qv-close:hover{ transform: rotate(90deg); background: var(--dlx-pink-soft); }

.apx-qv-loading{ display: flex; align-items: center; justify-content: center; min-height: 300px; }
.apx-qv-spinner{
	width: 40px; height: 40px; border-radius: 50%;
	border: 3px solid var(--dlx-pink-soft); border-top-color: var(--dlx-accent);
	animation: apx-qv-spin .8s linear infinite;
}
@keyframes apx-qv-spin{ to{ transform: rotate(360deg); } }

.apx-qv-body{ display: grid; grid-template-columns: 1fr 1fr; gap: 2.6rem; }

/* ---- Gallery ---- */
.apx-qv-gallery-main{
	border-radius: var(--dlx-radius-md); overflow: hidden; aspect-ratio: 1/1;
	background: var(--dlx-card); box-shadow: 0 20px 44px -20px rgba(124,92,255,.3);
	position: relative; cursor: zoom-in;
}
.apx-qv-gallery-main img{ width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; transform-origin: center; }
.apx-qv-gallery-main.apx-qv-zoomed img{ transform: scale(1.8); cursor: zoom-out; }

.apx-qv-gallery-arrow{
	position:absolute; top:50%; transform:translateY(-50%); z-index:5;
	width:38px; height:38px; border-radius:50%;
	display:flex; align-items:center; justify-content:center;
	background: hsla(0,0%,100%,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	color: var(--dlx-text); box-shadow: 0 6px 16px -8px rgba(46,36,52,.3);
	border:none; cursor:pointer; padding:0;
	opacity:0; transition: opacity .3s ease, background .25s ease, transform .25s ease;
}
html[data-dlx-theme="dark"] .apx-qv-gallery-arrow{ background: hsla(255,15%,15%,.7); }
.apx-qv-gallery-main:hover .apx-qv-gallery-arrow{ opacity:1; }
.apx-qv-gallery-arrow:hover{ background: var(--dlx-pink-soft); color: var(--dlx-accent); }
.apx-qv-gallery-arrow:active{ transform: translateY(-50%) scale(.92); }
.apx-qv-gallery-arrow svg{ width:18px; height:18px; }
.apx-qv-gallery-arrow-prev{ left:12px; }
.apx-qv-gallery-arrow-next{ right:12px; }
@media (hover:none){
	.apx-qv-gallery-arrow{ opacity:1; }
}

.apx-qv-gallery-thumbs{ display: flex; gap: .7rem; margin-top: .9rem; overflow-x: auto; padding-bottom: .3rem; }
.apx-qv-thumb{
	width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex-shrink: 0;
	border: 2px solid transparent; cursor: pointer; opacity: .7; transition: opacity .25s ease, border-color .25s ease;
}
.apx-qv-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.apx-qv-thumb:hover, .apx-qv-thumb.apx-qv-thumb-active{ opacity: 1; border-color: var(--dlx-accent); }

/* ---- Details ---- */
.apx-qv-details{ display: flex; flex-direction: column; }
.apx-qv-badges{ display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.apx-qv-badges span{
	font-family: 'Outfit', sans-serif; font-size: .65rem; font-weight: 700; padding: .3rem .65rem;
	border-radius: 999px; background: var(--dlx-text); color: var(--dlx-bg);
}
.apx-qv-title{ font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; margin: 0 0 .5rem; color: var(--dlx-text); }

.apx-qv-variant-row{ margin-bottom: 1rem; }
.apx-qv-variant-label{ font-size: .8rem; color: var(--dlx-text-soft); margin: 0 0 .5rem; }
.apx-qv-variant-swatches{ display: flex; gap: .5rem; flex-wrap: wrap; }
.apx-qv-variant-swatch{
	width: 46px; height: 46px; border-radius: 10px; overflow: hidden; padding: 0; cursor: pointer;
	border: 2px solid transparent; opacity: .7; transition: opacity .25s ease, border-color .25s ease, transform .2s ease;
}
.apx-qv-variant-swatch:hover{ opacity: 1; transform: translateY(-2px); }
.apx-qv-variant-swatch.apx-qv-variant-active{ opacity: 1; border-color: var(--dlx-accent); }
.apx-qv-variant-swatch img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.apx-qv-variant-swatch:disabled{ cursor: default; opacity: 1; }

.apx-qv-rating{ color: #F0B429; font-size: .85rem; margin-bottom: .8rem; }
.apx-qv-rating span{ color: var(--dlx-text-soft); margin-left: .3rem; }

.apx-qv-price-row{ font-size: 1.5rem; font-weight: 700; color: var(--dlx-text); margin-bottom: .5rem; }
.apx-qv-price-row del{ font-size: 1rem; font-weight: 400; color: var(--dlx-text-soft); margin-left: .5rem; }
.apx-qv-price-row .apx-qv-discount{ font-size: .78rem; font-weight: 700; color: #fff; background: var(--dlx-pink); border-radius: 999px; padding: .2rem .6rem; margin-left: .5rem; vertical-align: middle; }

.apx-qv-stock{ font-size: .85rem; font-weight: 600; margin: 0 0 .2rem; }
.apx-qv-stock.apx-qv-in-stock{ color: #3FA66E; }
.apx-qv-stock.apx-qv-out-stock{ color: #C0392B; }
.apx-qv-sku{ font-size: .78rem; color: var(--dlx-text-soft); margin: 0 0 1rem; }
.apx-qv-short-desc{ color: var(--dlx-text-soft); font-size: .92rem; margin-bottom: 1.2rem; }

/* ---- Variations ---- */
.apx-qv-variation-group{ margin-bottom: 1rem; }
.apx-qv-variation-label{ font-weight: 600; font-size: .82rem; margin-bottom: .5rem; display: block; }
.apx-qv-variation-options{ display: flex; gap: .5rem; flex-wrap: wrap; }
.apx-qv-variation-option{
	padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--dlx-border);
	font-size: .82rem; font-weight: 500; cursor: pointer; transition: all .25s ease; background: var(--dlx-card); color: var(--dlx-text);
}
.apx-qv-variation-option:hover{ border-color: var(--dlx-accent); }
.apx-qv-variation-option.apx-qv-selected{ background: linear-gradient(135deg, var(--dlx-pink), var(--dlx-lilac)); color: #fff; border-color: transparent; }
.apx-qv-variation-option:disabled{ opacity: .35; cursor: not-allowed; text-decoration: line-through; }

/* ---- Quantity ---- */
.apx-qv-qty-row{ display: flex; align-items: center; gap: 1rem; margin: 1rem 0 1.3rem; }
.apx-qv-qty-row label{ font-weight: 600; font-size: .82rem; }
.apx-qv-qty-stepper{ display: flex; align-items: center; border: 1.5px solid var(--dlx-border); border-radius: 999px; overflow: hidden; }
.apx-qv-qty-btn{ width: 34px; height: 34px; display:flex; align-items:center; justify-content:center; background: none; border: none; font-size: 1.1rem; line-height:1; cursor: pointer; color: var(--dlx-text); }
.apx-qv-qty-btn:hover{ background: var(--dlx-pink-soft); }
.apx-qv-qty-stepper input{ width: 46px; text-align: center; border: none; font-size: .9rem; background: none; color: var(--dlx-text); }
.apx-qv-qty-stepper input::-webkit-outer-spin-button, .apx-qv-qty-stepper input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }

/* ---- Actions ---- */
.apx-qv-actions{ display: flex; gap: .9rem; margin-bottom: 1rem; }
/* WooCommerce's own add-to-cart.js automatically inserts a "View cart"
   link after a successful add — hidden here, same as the main product
   page, without touching the underlying event the header's cart badge
   still depends on. */
.apx-qv-actions .added_to_cart{ display:none !important; }
.apx-qv-add-to-cart{
	flex: 1; padding: 1rem; border-radius: 999px; border: none;
	background: linear-gradient(135deg, var(--dlx-pink), var(--dlx-lilac)); color: #fff;
	font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .92rem; cursor: pointer;
	transition: transform .3s ease, box-shadow .3s ease;
}
.apx-qv-add-to-cart:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(124,92,255,.5); }
.apx-qv-add-to-cart:disabled{ opacity: .5; cursor: not-allowed; transform: none; }
.apx-qv-buy-now{
	flex: 1; padding: 1rem; border-radius: 999px; border: 1.5px solid var(--dlx-text); color: var(--dlx-text);
	background:none; cursor:pointer;
	text-align: center; text-decoration: none; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: .92rem;
	transition: background .3s ease, color .3s ease, opacity .3s ease;
}
.apx-qv-buy-now:hover{ background: var(--dlx-text); color: var(--dlx-bg); }
.apx-qv-buy-now:disabled{ opacity:.5; cursor:not-allowed; }
.apx-qv-buy-now:disabled:hover{ background:none; color: var(--dlx-text); }

.apx-qv-secondary-actions{ display: flex; gap: 1.4rem; margin-bottom: 1.4rem; }
.apx-qv-wishlist-btn, .apx-qv-share-btn{
	display: flex; align-items: center; gap: .4rem; background: none; border: none; cursor: pointer;
	font-size: .82rem; color: var(--dlx-text-soft); transition: color .25s ease;
}
.apx-qv-wishlist-btn svg, .apx-qv-share-btn svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.apx-qv-wishlist-btn:hover, .apx-qv-share-btn:hover{ color: var(--dlx-accent); }
.apx-qv-wishlist-btn.apx-active{ color: var(--dlx-pink); }
.apx-qv-wishlist-btn.apx-active svg{ fill: var(--dlx-pink); }
.apx-qv-wishlist-btn.apx-flash-success{ color:#2FBE6B !important; }
.apx-qv-wishlist-btn.apx-flash-success svg{ stroke:#2FBE6B !important; }

/* ---- Info strip ---- */
.apx-qv-info-strip{ border-top: 1px solid var(--dlx-border); border-bottom: 1px solid var(--dlx-border); padding: 1rem 0; margin-bottom: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.apx-qv-info-item{ display: flex; align-items: center; gap: .6rem; font-size: .82rem; color: var(--dlx-text-soft); }
.apx-qv-info-item a{ color: var(--dlx-accent); font-weight: 600; }
.apx-qv-payment-icons span{ font-size: .68rem; font-weight: 700; border: 1px solid var(--dlx-border); border-radius: 5px; padding: .2rem .5rem; margin-right: .35rem; }

.apx-qv-meta{ font-size: .8rem; color: var(--dlx-text-soft); margin-bottom: 1rem; }
.apx-qv-meta strong{ color: var(--dlx-text); }

/* ---- Tabs ---- */
.apx-qv-tab-nav{ display: flex; gap: 1.6rem; border-bottom: 1px solid var(--dlx-border); margin-bottom: 1rem; }
.apx-qv-tab-btn{
	background: none; border: none; padding: .7rem 0; font-family: 'Outfit', sans-serif; font-weight: 600;
	font-size: .85rem; color: var(--dlx-text-soft); cursor: pointer; position: relative;
}
.apx-qv-tab-btn.apx-qv-tab-active{ color: var(--dlx-accent); }
.apx-qv-tab-btn.apx-qv-tab-active::after{ content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--dlx-pink), var(--dlx-lilac)); }
.apx-qv-tab-panel{ display: none; font-size: .88rem; color: var(--dlx-text-soft); line-height: 1.7; }
.apx-qv-tab-panel.apx-qv-tab-panel-active{ display: block; }
/* Some product descriptions (particularly imported/supplier listings)
   contain a raw HTML spec table rather than plain prose — styled here
   so it reads as a clean two-column list instead of falling back to
   the browser's harsh default table borders. */
.apx-qv-tab-panel table{ width: 100%; border-collapse: collapse; margin: .5rem 0; }
.apx-qv-tab-panel table tr{ border-bottom: 1px solid var(--dlx-border); }
.apx-qv-tab-panel table tr:last-child{ border-bottom: none; }
.apx-qv-tab-panel table td, .apx-qv-tab-panel table th{ padding: .6rem .5rem; text-align: left; border: none; }
.apx-qv-tab-panel table td:first-child, .apx-qv-tab-panel table th:first-child{ font-weight: 600; color: var(--dlx-text); width: 40%; }

/* ---- Footer: related / recently viewed ---- */
.apx-qv-footer{ grid-column: 1 / -1; margin-top: 2rem; padding-top: 1.8rem; border-top: 1px solid var(--dlx-border); }
.apx-qv-footer-section{ margin-bottom: 1.6rem; }
.apx-qv-footer-section h3{ font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; margin: 0 0 .9rem; color: var(--dlx-text); }
.apx-qv-scroll-row{ display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.apx-qv-scroll-row .dlx-product-card{ width: 170px; flex: 0 0 170px; }
.apx-qv-scroll-row .dlx-pc-body{ padding: .8rem .9rem 1rem; }
.apx-qv-scroll-row .dlx-pc-body h3{ font-size: .88rem; }

@media (max-width: 900px){
	.apx-qv-body{ grid-template-columns: 1fr; }
	.apx-qv-modal{ padding: 1.6rem; }
}
@media (prefers-reduced-motion: reduce){
	.apx-qv-overlay *{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}