/**
 * AI Image to 3D Product Viewer & AR - Augmented Reality
 *
 * @author    Anthony Fantinati - Blazing Ideas
 * @copyright 2024-2026 Blazing Ideas - www.fantinati.com
 * @license   Proprietary
 */
:root {
--ai3d-accent: #e19e02;
--ai3d-accent-light: #f0c040;
--ai3d-accent-rgb: 225, 158, 2;
--ai3d-bg-dark: #1a1a1a;
--ai3d-bg-panel: #222;
--ai3d-bg-control: #333;
--ai3d-bg-control-hover: #444;
--ai3d-border: #333;
--ai3d-border-light: #555;
--ai3d-text: #fff;
--ai3d-text-muted: #aaa;
--ai3d-text-dim: #ccc;
--ai3d-danger: #dc3545;
--ai3d-danger-hover: #c82333;
--ai3d-success: #28a745;
--ai3d-ar: #00d4aa;
--ai3d-ar-hover: #00e6bb;
--ai3d-download-bg: #6c757d;
--ai3d-download-hover: #545b62;
--ai3d-focus: #4d90fe;
--ai3d-focus-rgb: 77, 144, 254;
--ai3d-modal-shadow: 0 0 40px rgba(var(--ai3d-shadow-color-rgb), 0.3);
--ai3d-modal-border-color: var(--ai3d-accent);
--ai3d-thumb-active-color: var(--ai3d-accent);
--ai3d-pulse-color-rgb: var(--ai3d-accent-rgb);
--ai3d-modal-header-color: var(--ai3d-accent);
--ai3d-controls-color: var(--ai3d-accent);
--ai3d-controls-color-rgb: var(--ai3d-accent-rgb);
--ai3d-gallery-price-color: var(--ai3d-accent);
--ai3d-shadow-color: var(--ai3d-accent);
--ai3d-shadow-color-rgb: var(--ai3d-accent-rgb);
--ai3d-shadow-color-light: var(--ai3d-accent-light);
--ai3d-radius: 8px;
--ai3d-radius-sm: 6px;
--ai3d-transition: 0.3s ease;
--ai3d-pmodal-header-bg: var(--ai3d-bg-panel);
--ai3d-pmodal-header-text: var(--ai3d-modal-header-color);
--ai3d-pmodal-body-text: var(--ai3d-text);
--ai3d-lmodal-header-bg: var(--ai3d-bg-panel);
--ai3d-lmodal-body-bg: var(--ai3d-bg-dark);
--ai3d-lmodal-header-text: var(--ai3d-modal-header-color);
--ai3d-lmodal-body-text: var(--ai3d-text);
--ai3d-lmodal-border-radius: 12px;
--ai3d-lmodal-border-color: var(--ai3d-modal-border-color);
--ai3d-lmodal-max-width: 700px;
--ai3d-lmodal-height: 70vh;
--ai3d-lmodal-border: 2px solid var(--ai3d-lmodal-border-color);
--ai3d-amodal-header-bg: var(--ai3d-bg-panel);
--ai3d-amodal-body-bg: var(--ai3d-bg-dark);
--ai3d-amodal-header-text: var(--ai3d-modal-header-color);
--ai3d-amodal-body-text: var(--ai3d-text-dim);
--ai3d-amodal-border-radius: 12px;
--ai3d-amodal-border-color: var(--ai3d-modal-border-color);
--ai3d-amodal-max-width: 420px;
--ai3d-amodal-height: auto;
--ai3d-amodal-border: 2px solid var(--ai3d-amodal-border-color);
--ai3d-inline-bg: #fff;
--ai3d-inline-text: #333;
--ai3d-inline-border: #ddd;
--ai3d-inline-border-hover: #ccc;
}
@media (prefers-color-scheme: dark) {
:root {
--ai3d-inline-bg: #2a2a2a;
--ai3d-inline-text: #e0e0e0;
--ai3d-inline-border: #444;
--ai3d-inline-border-hover: #666;
}
}
.ai3d-dark {
--ai3d-inline-bg: #2a2a2a;
--ai3d-inline-text: #e0e0e0;
--ai3d-inline-border: #444;
--ai3d-inline-border-hover: #666;
}
.ai3d-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
line-height: 1.4;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.ai3d-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
text-decoration: none;
}
.ai3d-btn:active {
transform: translateY(0);
}
.ai3d-btn svg {
flex-shrink: 0;
transition: transform 0.4s ease;
}
.ai3d-open-modal:hover svg {
transform: rotateY(180deg);
}
.ai3d-open-modal {
animation: ai3d-pulse-glow 2.5s ease-in-out infinite;
}
.ai3d-open-modal:hover {
animation: none;
}
@keyframes ai3d-pulse-glow {
0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(var(--ai3d-pulse-color-rgb), 0.5); }
50% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 18px 4px rgba(var(--ai3d-pulse-color-rgb), 0.35); }
}
.ai3d-btn-ar {
background: var(--ai3d-ar);
color: #000;
font-weight: bold;
padding: 10px 16px;
}
.ai3d-btn-ar:hover {
filter: brightness(1.1);
}
.ai3d-btn-ar[style*="background-color"]:hover {
filter: brightness(1.1);
}
.ai3d-btn-download {
background: var(--ai3d-download-bg);
color: var(--ai3d-text);
font-size: 12px;
padding: 8px 14px;
}
.ai3d-btn-download:hover {
background: var(--ai3d-download-hover);
color: var(--ai3d-text);
}
.ai3d-viewer-wrapper {
margin: 15px 0;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.ai3d-btn-compact {
background: #2d2d2d;
color: #fff;
padding: 8px 14px;
font-size: 13px;
font-weight: 700;
border-radius: 6px;
gap: 5px;
letter-spacing: 0.5px;
}
.ai3d-btn-compact:hover {
background: #444;
}
.ai3d-badge-wrapper {
margin: 0;
}
.ai3d-product-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
line-height: 1.2;
background: var(--ai3d-accent, #e19e02);
color: #000;
z-index: 3;
}
.ai3d-product-badge:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
text-decoration: none;
}
.ai3d-product-badge[data-ai3d-repositioned] {
position: absolute;
right: 10px;
z-index: 3;
}
.ai3d-product-badge.ai3d-badge-left[data-ai3d-repositioned] {
right: auto;
left: 10px;
}
.ai3d-images-hidden .images-container,
.ai3d-images-hidden .product-images,
.ai3d-images-hidden .product-cover,
.ai3d-images-hidden #content .images-container {
display: none !important;
}
.ai3d-product-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.ai3d-btn-width-auto,
.ai3d-product-buttons.ai3d-btn-width-auto {
justify-content: space-between;
}
.ai3d-btn-width-full,
.ai3d-product-buttons.ai3d-btn-width-full {
width: 100%;
flex-direction: column;
}
.ai3d-btn-width-full > .ai3d-btn,
.ai3d-product-buttons.ai3d-btn-width-full > .ai3d-btn {
width: 100%;
flex: 0 0 100%;
justify-content: center;
box-sizing: border-box;
}
.ai3d-btn-width-half,
.ai3d-product-buttons.ai3d-btn-width-half {
width: 100%;
flex-wrap: nowrap;
}
.ai3d-btn-width-half > .ai3d-btn,
.ai3d-product-buttons.ai3d-btn-width-half > .ai3d-btn {
width: calc(50% - 4px);
flex: 0 0 calc(50% - 4px);
justify-content: center;
min-width: 0;
box-sizing: border-box;
}
.ai3d-modal-overlay {
display: none !important;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
z-index: 99999;
justify-content: center;
align-items: center;
padding: 20px;
transition: background 0.3s ease;
}
.ai3d-modal-overlay.active {
display: flex !important;
background: rgba(0, 0, 0, 0.88);
}
.ai3d-modal-overlay.ai3d-animating {
background: rgba(0, 0, 0, 0);
}
.ai3d-modal {
background: var(--ai3d-bg-dark);
border-radius: 12px;
width: 100%;
max-width: 900px;
height: 85vh;
max-height: 750px;
display: flex;
flex-direction: column;
border: 2px solid var(--ai3d-modal-border-color);
box-shadow: var(--ai3d-modal-shadow);
overflow: hidden;
transform: scale(0.9) translateY(20px);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
will-change: transform, opacity;
}
.ai3d-modal-overlay.active .ai3d-modal {
transform: scale(1) translateY(0);
opacity: 1;
}
.ai3d-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
border-bottom: 1px solid var(--ai3d-border);
background: var(--ai3d-pmodal-header-bg);
gap: 10px;
}
.ai3d-modal-title {
margin: 0;
color: var(--ai3d-pmodal-header-text);
font-size: 1.1em;
font-weight: 600;
white-space: nowrap;
}
.ai3d-modal-close,
.ai3d-listing-modal-close {
background: var(--ai3d-danger);
color: var(--ai3d-text);
border: none;
width: 34px;
height: 34px;
border-radius: 50%;
font-size: 1.2em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
line-height: 1;
flex-shrink: 0;
}
.ai3d-modal-close:hover,
.ai3d-listing-modal-close:hover {
background: var(--ai3d-danger-hover);
transform: scale(1.1);
}
.ai3d-modal-body {
flex: 1;
padding: 0;
overflow: hidden;
position: relative;
color: var(--ai3d-pmodal-body-text);
}
.ai3d-model-viewer {
width: 100%;
height: 100%;
--poster-color: transparent;
transition: opacity 0.4s ease;
}
.ai3d-model-viewer.ai3d-fading {
opacity: 0.2;
}
.ai3d-modal-footer {
padding: 10px 16px;
border-top: 1px solid var(--ai3d-border);
background: var(--ai3d-pmodal-header-bg);
color: var(--ai3d-pmodal-body-text);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.ai3d-loading-container {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: inherit;
z-index: 5;
transition: opacity 0.4s ease;
pointer-events: none;
}
.ai3d-loading-container.ai3d-hidden {
opacity: 0;
}
.ai3d-skeleton-cube {
width: 80px;
height: 80px;
margin-bottom: 20px;
position: relative;
transform-style: preserve-3d;
animation: ai3d-cube-rotate 3s linear infinite;
will-change: transform;
}
.ai3d-skeleton-cube .ai3d-cube-face {
position: absolute;
width: 80px;
height: 80px;
border: 2px solid rgba(var(--ai3d-shadow-color-rgb), 0.4);
background: rgba(var(--ai3d-shadow-color-rgb), 0.08);
border-radius: 4px;
}
.ai3d-skeleton-cube .ai3d-cube-face:nth-child(1) { transform: translateZ(40px); }
.ai3d-skeleton-cube .ai3d-cube-face:nth-child(2) { transform: translateZ(-40px); }
.ai3d-skeleton-cube .ai3d-cube-face:nth-child(3) { transform: rotateY(90deg) translateZ(40px); }
.ai3d-skeleton-cube .ai3d-cube-face:nth-child(4) { transform: rotateY(-90deg) translateZ(40px); }
.ai3d-skeleton-cube .ai3d-cube-face:nth-child(5) { transform: rotateX(90deg) translateZ(40px); }
.ai3d-skeleton-cube .ai3d-cube-face:nth-child(6) { transform: rotateX(-90deg) translateZ(40px); }
@keyframes ai3d-cube-rotate {
0% { transform: rotateX(-20deg) rotateY(0deg); }
100% { transform: rotateX(-20deg) rotateY(360deg); }
}
.ai3d-progress-wrapper {
width: 200px;
max-width: 60%;
}
.ai3d-progress-bar {
width: 100%;
height: 6px;
background: var(--ai3d-bg-control);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.ai3d-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--ai3d-shadow-color), var(--ai3d-shadow-color-light));
border-radius: 3px;
width: 0%;
transition: width 0.3s ease;
}
.ai3d-progress-text {
color: var(--ai3d-text-muted);
font-size: 12px;
text-align: center;
}
.ai3d-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 20px;
text-align: center;
color: var(--ai3d-text-muted);
min-height: 200px;
}
.ai3d-empty-state svg {
width: 48px;
height: 48px;
margin-bottom: 16px;
opacity: 0.4;
stroke: currentColor;
}
.ai3d-empty-state-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: var(--ai3d-text-dim);
}
.ai3d-empty-state-text {
font-size: 13px;
line-height: 1.5;
max-width: 280px;
margin: 0;
}
.ai3d-inline-wrapper .ai3d-empty-state,
.ai3d-tab-wrapper .ai3d-empty-state {
color: #999;
background: var(--ai3d-inline-bg);
border: 1px dashed var(--ai3d-inline-border);
border-radius: var(--ai3d-radius);
}
.ai3d-inline-wrapper .ai3d-empty-state-title,
.ai3d-tab-wrapper .ai3d-empty-state-title {
color: #666;
}
.ai3d-viewer-controls {
display: flex;
gap: 12px;
align-items: center;
}
.ai3d-control-group {
display: flex;
align-items: center;
gap: 6px;
}
.ai3d-control-group label {
color: var(--ai3d-text-muted);
font-size: 0.8em;
white-space: nowrap;
margin: 0;
}
.ai3d-control-group input[type="range"] {
width: 80px;
height: 5px;
-webkit-appearance: none;
appearance: none;
background: var(--ai3d-bg-control-hover);
border-radius: 3px;
cursor: pointer;
}
.ai3d-control-group input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 14px;
height: 14px;
background: var(--ai3d-controls-color);
border-radius: 50%;
cursor: pointer;
}
.ai3d-control-group input[type="range"]::-moz-range-thumb {
width: 14px;
height: 14px;
background: var(--ai3d-controls-color);
border-radius: 50%;
cursor: pointer;
border: none;
}
.ai3d-viewer-actions {
display: flex;
gap: 6px;
align-items: center;
}
.ai3d-ctrl-btn {
background: var(--ai3d-bg-control);
color: var(--ai3d-text-dim);
border: 1px solid var(--ai3d-border-light);
width: 32px;
height: 32px;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
padding: 0;
}
.ai3d-ctrl-btn:hover {
background: var(--ai3d-bg-control-hover);
color: var(--ai3d-controls-color);
border-color: var(--ai3d-controls-color);
}
.ai3d-ctrl-btn.active {
background: var(--ai3d-controls-color);
color: #000;
border-color: var(--ai3d-controls-color);
}
.ai3d-ctrl-btn svg {
width: 16px;
height: 16px;
}
.ai3d-bg-picker {
display: flex;
gap: 4px;
align-items: center;
}
.ai3d-bg-swatch {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid var(--ai3d-border-light);
cursor: pointer;
transition: all 0.2s;
}
.ai3d-bg-swatch:hover,
.ai3d-bg-swatch.active {
border-color: var(--ai3d-controls-color);
transform: scale(1.2);
}
.ai3d-bg-swatch[data-color="#ffffff"] { background: #ffffff; }
.ai3d-bg-swatch[data-color="#000000"] { background: #000000; }
.ai3d-bg-swatch[data-color="#808080"] { background: #808080; }
.ai3d-bg-swatch[data-color="transparent"] { background: repeating-conic-gradient(#ddd 0% 25%, #fff 0% 50%) 50% / 10px 10px; }
.ai3d-combo-select {
padding: 6px 28px 6px 10px;
border: 1px solid var(--ai3d-border-light);
border-radius: var(--ai3d-radius-sm);
background: var(--ai3d-bg-control);
color: #eee;
font-size: 13px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
max-width: 220px;
}
.ai3d-combo-select:hover { border-color: var(--ai3d-controls-color); }
.ai3d-combo-select:focus { outline: none; border-color: var(--ai3d-controls-color); box-shadow: 0 0 0 2px rgba(var(--ai3d-controls-color-rgb), 0.25); }
.ai3d-combo-select option { background: var(--ai3d-bg-control); color: #eee; }
.ai3d-combo-select-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.ai3d-inline-controls .ai3d-combo-select,
.ai3d-tab-controls .ai3d-combo-select {
background: var(--ai3d-inline-bg);
color: var(--ai3d-inline-text);
border-color: var(--ai3d-inline-border-hover);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
}
.ai3d-inline-controls .ai3d-combo-select:hover,
.ai3d-tab-controls .ai3d-combo-select:hover { border-color: var(--ai3d-controls-color); }
.ai3d-inline-controls .ai3d-combo-select option,
.ai3d-tab-controls .ai3d-combo-select option { background: var(--ai3d-inline-bg); color: var(--ai3d-inline-text); }
.ai3d-ar-popup {
background: var(--ai3d-amodal-body-bg);
border-radius: var(--ai3d-amodal-border-radius);
width: 100%;
max-width: var(--ai3d-amodal-max-width);
height: var(--ai3d-amodal-height);
border: var(--ai3d-amodal-border);
box-shadow: 0 0 30px rgba(var(--ai3d-shadow-color-rgb), 0.3);
overflow: hidden;
transform: scale(0.9);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.ai3d-modal-overlay.active .ai3d-ar-popup {
transform: scale(1);
opacity: 1;
}
.ai3d-ar-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
border-bottom: 1px solid var(--ai3d-border);
background: var(--ai3d-amodal-header-bg);
}
.ai3d-ar-header h3 { margin: 0; color: var(--ai3d-amodal-header-text); font-size: 1.1em; }
.ai3d-ar-body {
padding: 25px;
text-align: center;
color: var(--ai3d-amodal-body-text);
}
.ai3d-ar-instructions {
display: flex;
align-items: center;
gap: 10px;
background: rgba(var(--ai3d-controls-color-rgb), 0.1);
border: 1px solid rgba(var(--ai3d-controls-color-rgb), 0.3);
border-radius: 8px;
padding: 12px;
margin-bottom: 15px;
text-align: left;
}
.ai3d-ar-instructions svg { flex-shrink: 0; color: var(--ai3d-controls-color); }
.ai3d-ar-instructions p { margin: 0; font-size: 13px; color: #ddd; }
.ai3d-qr-container {
background: #fff;
display: inline-block;
padding: 15px;
border-radius: 8px;
margin: 15px 0;
animation: ai3d-qr-appear 0.5s ease 0.2s both;
}
@keyframes ai3d-qr-appear {
from { transform: scale(0.5) rotate(-5deg); opacity: 0; }
to { transform: scale(1) rotate(0deg); opacity: 1; }
}
.ai3d-qr-container canvas,
.ai3d-qr-container img {
display: block;
width: 180px;
height: 180px;
}
.ai3d-ar-actions {
display: flex;
gap: 8px;
margin-top: 15px;
justify-content: center;
flex-wrap: wrap;
}
.ai3d-ar-copy {
background: var(--ai3d-bg-control);
color: var(--ai3d-text);
border: 1px solid var(--ai3d-border-light);
padding: 8px 14px;
font-size: 13px;
}
.ai3d-ar-copy:hover { background: var(--ai3d-bg-control-hover); color: var(--ai3d-text); }
.ai3d-ar-open { background: var(--ai3d-controls-color); color: #000; padding: 8px 14px; font-size: 13px; }
.ai3d-ar-share-btn {
background: var(--ai3d-bg-control);
color: var(--ai3d-text);
border: 1px solid var(--ai3d-border-light);
width: 38px;
height: 38px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.ai3d-ar-share-btn:hover { transform: scale(1.1); }
.ai3d-ar-share-btn.ai3d-share-whatsapp:hover { background: #25d366; border-color: #25d366; }
.ai3d-ar-share-btn.ai3d-share-email:hover { background: #4285f4; border-color: #4285f4; }
.ai3d-ar-share-btn.ai3d-share-sms:hover { background: #34b7f1; border-color: #34b7f1; }
.ai3d-ar-feedback { color: var(--ai3d-success); font-size: 0.85em; margin-top: 10px; }
.ai3d-inline-wrapper { flex-direction: column; align-items: stretch; }
.ai3d-inline-viewer { width: 100%; border-radius: var(--ai3d-radius); overflow: hidden; border: 1px solid var(--ai3d-inline-border); }
.ai3d-inline-controls { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.ai3d-btn-fullscreen { font-size: 12px; padding: 8px 14px; }
.ai3d-tab-wrapper { flex-direction: column; align-items: stretch; }
.ai3d-tab-viewer { width: 100%; border-radius: var(--ai3d-radius); overflow: hidden; border: 1px solid var(--ai3d-inline-border); }
.ai3d-tab-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; flex-wrap: wrap; gap: 10px; }
.ai3d-tab-actions { display: flex; gap: 10px; }
.product-miniature:has(.ai3d-listing-btn),
.product-miniature:has([data-ai3d-rendered]),
.product-miniature:has(.ai3d-listing-inline-wrapper),
.js-product-miniature:has(.ai3d-listing-btn),
.js-product-miniature:has(.ai3d-listing-inline-wrapper) {
overflow: visible !important;
}
#content .featured-products .product-miniature,
.featuredproducts .product-miniature,
[id*="featured"] .product-miniature {
overflow: visible !important;
}
.ai3d-listing-buttons-wrapper {
display: inline-flex;
gap: 6px;
align-items: center;
margin-top: 6px;
}
.ai3d-listing-btn {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
border: none;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
line-height: 1.2;
letter-spacing: 0.5px;
position: relative;
z-index: 2;
}
.ai3d-listing-btn:hover {
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
text-decoration: none;
}
.ai3d-listing-buttons-wrapper.ai3d-listing-btn-width-auto {
width: 100%;
justify-content: space-between;
}
.ai3d-listing-buttons-wrapper.ai3d-listing-btn-width-full {
width: 100%;
flex-direction: column;
}
.ai3d-listing-buttons-wrapper.ai3d-listing-btn-width-full > .ai3d-listing-btn {
width: 100%;
justify-content: center;
text-align: center;
}
.ai3d-listing-buttons-wrapper.ai3d-listing-btn-width-half {
width: 100%;
flex-wrap: nowrap;
}
.ai3d-listing-buttons-wrapper.ai3d-listing-btn-width-half > .ai3d-listing-btn {
width: calc(50% - 3px);
flex: 0 0 calc(50% - 3px);
justify-content: center;
text-align: center;
min-width: 0;
box-sizing: border-box;
}
.ai3d-listing-btn svg { flex-shrink: 0; }
.ai3d-listing-icon-only {
padding: 6px;
border-radius: 50%;
width: 32px;
height: 32px;
justify-content: center;
}
.ai3d-listing-badge {
padding: 3px 7px;
border-radius: 3px;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.8px;
gap: 3px;
}
.ai3d-listing-badge--hook[data-ai3d-repositioned] {
position: absolute;
top: 8px;
right: 8px;
z-index: 3;
}
.ai3d-listing-badge--hook.ai3d-badge-left[data-ai3d-repositioned] {
right: auto;
left: 8px;
}
.ai3d-listing-inline-wrapper {
width: 100%;
}
.ai3d-inline-wrapper[data-replace-images="1"] {
display: flex;
width: 100%;
}
.ai3d-inline-wrapper[data-replace-images="1"] .ai3d-inline-viewer {
min-height: 400px;
}
.ai3d-listing-inline-wrapper[data-ai3d-mode="replace_images"] {
display: block;
width: 100%;
min-height: 250px;
position: relative;
z-index: 1;
}
.ai3d-listing-replace-link {
display: block;
width: 100%;
text-decoration: none;
min-height: 250px;
}
.ai3d-listing-replace-link model-viewer {
pointer-events: auto;
}
.ai3d-listing-replace-viewer {
width: 100%;
min-height: 250px;
display: block;
}
.thumbnail-container > .ai3d-listing-inline-wrapper,
.product-thumbnail > .ai3d-listing-inline-wrapper,
.product-image > .ai3d-listing-inline-wrapper,
.product-img > .ai3d-listing-inline-wrapper {
display: block;
width: 100%;
min-height: 250px;
position: relative;
z-index: 1;
}
.thumbnail-container:has(> .ai3d-listing-inline-wrapper[data-ai3d-mode="replace_images"]),
.product-thumbnail:has(> .ai3d-listing-inline-wrapper[data-ai3d-mode="replace_images"]),
.product-image:has(> .ai3d-listing-inline-wrapper[data-ai3d-mode="replace_images"]),
.product-img:has(> .ai3d-listing-inline-wrapper[data-ai3d-mode="replace_images"]) {
min-height: 250px;
width: 100%;
position: relative;
display: flex;
flex-direction: column;
}
.thumbnail-container:has(> .ai3d-listing-inline-wrapper),
.product-thumbnail:has(> .ai3d-listing-inline-wrapper),
.product-image:has(> .ai3d-listing-inline-wrapper),
.product-img:has(> .ai3d-listing-inline-wrapper) {
min-height: 250px;
width: 100%;
position: relative;
}
.ai3d-listing-inline-wrapper[data-ai3d-mode="replace_images"] .ai3d-listing-inline-viewer,
.ai3d-listing-replace-link .ai3d-listing-inline-viewer {
min-height: 250px !important;
height: 250px !important;
width: 100%;
border-radius: 0;
}
.thumbnail-container > .ai3d-listing-inline-wrapper .ai3d-listing-inline-viewer,
.product-thumbnail > .ai3d-listing-inline-wrapper .ai3d-listing-inline-viewer,
.product-image > .ai3d-listing-inline-wrapper .ai3d-listing-inline-viewer,
.product-img > .ai3d-listing-inline-wrapper .ai3d-listing-inline-viewer {
min-height: 250px !important;
height: 250px !important;
width: 100%;
border-radius: 0;
}
.ai3d-listing-thumb-strip {
display: flex;
gap: 4px;
padding: 4px;
overflow-x: auto;
scrollbar-width: thin;
justify-content: center;
background: none;
}
.ai3d-listing-thumb-strip::-webkit-scrollbar { height: 3px; }
.ai3d-listing-thumb-strip::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; }
.ai3d-listing-thumb {
flex: 0 0 40px;
width: 40px;
height: 40px;
border: 2px solid transparent;
border-radius: 3px;
cursor: pointer;
object-fit: cover;
opacity: 0.6;
transition: opacity 0.15s, border-color 0.15s;
box-sizing: border-box;
}
.ai3d-listing-thumb:hover { opacity: 0.9; }
.ai3d-listing-thumb.active {
border-color: var(--ai3d-thumb-active-color, #e19e02);
opacity: 1;
}
.ai3d-listing-thumb-3d {
display: flex;
align-items: center;
justify-content: center;
background: #333;
color: #fff;
}
.ai3d-listing-replace-full-img {
width: 100%;
height: 250px;
object-fit: contain;
display: block;
}
.ai3d-listing-tooltip {
display: none;
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 200px;
background: var(--ai3d-bg-dark);
border: 2px solid var(--ai3d-modal-border-color);
border-radius: 8px;
overflow: hidden;
z-index: 1000;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ai3d-listing-btn:hover .ai3d-listing-tooltip {
display: block;
animation: ai3d-tooltip-in 0.2s ease;
}
@keyframes ai3d-tooltip-in {
from { opacity: 0; transform: translateX(-50%) translateY(5px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.ai3d-listing-tooltip model-viewer {
width: 100%;
height: 100%;
}
.ai3d-listing-modal-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.88);
z-index: 99999;
justify-content: center;
align-items: center;
padding: 20px;
}
.ai3d-listing-modal-overlay.active { display: flex; }
.ai3d-listing-modal {
background: var(--ai3d-lmodal-body-bg);
border-radius: var(--ai3d-lmodal-border-radius);
width: 100%;
max-width: var(--ai3d-lmodal-max-width);
height: var(--ai3d-lmodal-height);
max-height: 90vh;
display: flex;
flex-direction: column;
border: var(--ai3d-lmodal-border);
box-shadow: var(--ai3d-modal-shadow);
overflow: hidden;
transform: scale(0.9);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
will-change: transform, opacity;
}
.ai3d-listing-modal-overlay.active .ai3d-listing-modal {
transform: scale(1);
opacity: 1;
}
.ai3d-listing-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--ai3d-border);
background: var(--ai3d-lmodal-header-bg);
}
.ai3d-listing-modal-header h4 { margin: 0; color: var(--ai3d-lmodal-header-text); font-size: 1em; }
.ai3d-listing-modal-body { flex: 1; padding: 0; overflow: hidden; color: var(--ai3d-lmodal-body-text); }
.ai3d-listing-modal-body model-viewer { width: 100%; height: 100%; }
.ai3d-toast-container {
position: fixed;
top: 20px;
right: 20px;
z-index: 999999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
max-width: 380px;
width: calc(100% - 40px);
}
.ai3d-toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #fff;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
pointer-events: auto;
transform: translateX(110%);
opacity: 0;
transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.35s ease;
line-height: 1.4;
will-change: transform, opacity;
}
.ai3d-toast.ai3d-toast-visible {
transform: translateX(0);
opacity: 1;
}
.ai3d-toast.ai3d-toast-exit {
transform: translateX(110%);
opacity: 0;
}
.ai3d-toast-success { background: #1a7a3a; }
.ai3d-toast-error { background: #c0392b; }
.ai3d-toast-warning { background: #d4850a; }
.ai3d-toast-info { background: #2471a3; }
.ai3d-toast-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.ai3d-toast-message {
flex: 1;
}
.ai3d-toast-close {
flex-shrink: 0;
background: none;
border: none;
color: rgba(255, 255, 255, 0.7);
font-size: 18px;
cursor: pointer;
padding: 0 2px;
line-height: 1;
transition: color 0.2s;
}
.ai3d-toast-close:hover {
color: #fff;
}
.ai3d-btn:focus-visible,
.ai3d-ctrl-btn:focus-visible,
.ai3d-modal-close:focus-visible,
.ai3d-listing-modal-close:focus-visible,
.ai3d-listing-btn:focus-visible,
.ai3d-combo-select:focus-visible,
.ai3d-bg-swatch:focus-visible,
.ai3d-ar-share-btn:focus-visible,
.ai3d-ar-copy:focus-visible,
.ai3d-ar-open:focus-visible {
outline: 3px solid var(--ai3d-focus);
outline-offset: 2px;
box-shadow: 0 0 0 5px rgba(var(--ai3d-focus-rgb), 0.25);
}
.ai3d-control-group input[type="range"]:focus-visible {
outline: 3px solid var(--ai3d-focus);
outline-offset: 2px;
}
.ai3d-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ai3d-btn-loading {
position: relative;
pointer-events: none;
opacity: 0.75;
}
.ai3d-btn-loading::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 50%;
right: 10px;
margin-top: -8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: currentColor;
border-radius: 50%;
animation: ai3d-spin 0.6s linear infinite;
}
@keyframes ai3d-spin {
to { transform: rotate(360deg); }
}
.ai3d-ctrl-btn.ai3d-btn-loading::after {
width: 12px;
height: 12px;
margin-top: -6px;
right: 50%;
margin-right: -6px;
}
.ai3d-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: ai3d-shimmer 1.5s ease-in-out infinite;
}
@keyframes ai3d-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ai3d-tooltip-wrap {
position: relative;
}
.ai3d-tooltip-wrap::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%) scale(0.8);
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 5px 10px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s, transform 0.2s;
z-index: 100;
line-height: 1.3;
}
.ai3d-tooltip-wrap::after {
content: '';
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.85);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s;
z-index: 100;
}
.ai3d-tooltip-wrap:hover::before,
.ai3d-tooltip-wrap:focus-visible::before {
opacity: 1;
transform: translateX(-50%) scale(1);
}
.ai3d-tooltip-wrap:hover::after,
.ai3d-tooltip-wrap:focus-visible::after {
opacity: 1;
}
.modal .ai3d-modal-overlay,
.quickview .ai3d-modal-overlay,
[id*="quickview"] .ai3d-modal-overlay {
display: none !important;
}
.modal .ai3d-viewer-wrapper,
.quickview .ai3d-viewer-wrapper,
[id*="quickview"] .ai3d-viewer-wrapper {
max-width: 100%;
overflow: visible;
}
.modal .ai3d-inline-wrapper .ai3d-inline-viewer,
.quickview .ai3d-inline-wrapper .ai3d-inline-viewer,
[id*="quickview"] .ai3d-inline-wrapper .ai3d-inline-viewer {
max-height: 250px;
}
.modal .ai3d-qv-inline,
.quickview .ai3d-qv-inline,
[id*="quickview"] .ai3d-qv-inline {
width: 100%;
margin-top: 8px;
}
.modal .ai3d-qv-inline.ai3d-listing-replace-images,
.quickview .ai3d-qv-inline.ai3d-listing-replace-images,
[id*="quickview"] .ai3d-qv-inline.ai3d-listing-replace-images {
margin-top: 0;
}
.modal .ai3d-qv-inline .ai3d-listing-inline-viewer,
.quickview .ai3d-qv-inline .ai3d-listing-inline-viewer,
[id*="quickview"] .ai3d-qv-inline .ai3d-listing-inline-viewer {
max-height: 300px;
}
.modal .ai3d-qv-inline .ai3d-listing-replace-full-img,
.quickview .ai3d-qv-inline .ai3d-listing-replace-full-img,
[id*="quickview"] .ai3d-qv-inline .ai3d-listing-replace-full-img {
width: 100%;
height: 300px;
object-fit: contain;
}
.modal .ai3d-qv-inline .ai3d-listing-thumb-strip,
.quickview .ai3d-qv-inline .ai3d-listing-thumb-strip,
[id*="quickview"] .ai3d-qv-inline .ai3d-listing-thumb-strip {
justify-content: center;
padding: 6px;
}
.modal .images-container,
.quickview .images-container,
[id*="quickview"] .images-container {
position: relative;
}
.modal .ai3d-listing-buttons-wrapper,
.quickview .ai3d-listing-buttons-wrapper,
[id*="quickview"] .ai3d-listing-buttons-wrapper {
display: flex;
justify-content: center;
margin-top: 8px;
}
.ai3d-scroll-lock {
overflow: hidden !important;
touch-action: none;
}
.ai3d-scroll-lock body {
position: fixed;
width: 100%;
}
@media (max-width: 768px) {
.ai3d-modal { height: 95vh; max-height: none; border-radius: 8px; }
.ai3d-modal-footer { flex-direction: column; align-items: stretch; }
.ai3d-viewer-controls { flex-direction: column; gap: 8px; }
.ai3d-control-group input[type="range"] { width: 120px; }
.ai3d-viewer-actions { justify-content: center; flex-wrap: wrap; }
.ai3d-model-viewer-inline, .ai3d-model-viewer-tab { height: 300px !important; }
.ai3d-ar-popup { max-width: 95%; }
.ai3d-combo-select { max-width: 180px; font-size: 12px; }
.ai3d-tab-controls { flex-direction: column; align-items: stretch; }
.ai3d-bg-picker { display: none; }
.ai3d-listing-tooltip { display: none !important; }
.ai3d-ctrl-btn { width: 40px; height: 40px; min-width: 40px; }
.ai3d-modal-close, .ai3d-listing-modal-close { width: 40px; height: 40px; font-size: 1.4em; }
.ai3d-bg-swatch { width: 28px; height: 28px; }
.ai3d-listing-btn { padding: 8px 12px; }
.ai3d-listing-icon-only { width: 40px; height: 40px; }
.ai3d-toast-container {
top: auto;
bottom: 20px;
right: 10px;
left: 10px;
max-width: none;
width: auto;
}
.ai3d-tooltip-wrap::before,
.ai3d-tooltip-wrap::after {
display: none;
}
.ai3d-modal-overlay { padding: 10px; }
.ai3d-modal-header { padding: 10px 14px; }
}
@media (max-width: 480px) {
.ai3d-btn { padding: 8px 14px; font-size: 13px; }
.ai3d-model-viewer-inline, .ai3d-model-viewer-tab { height: 250px !important; }
.ai3d-modal-footer { padding: 8px 12px; }
.ai3d-ctrl-btn { width: 36px; height: 36px; }
.ai3d-empty-state { padding: 24px 16px; min-height: 160px; }
.ai3d-empty-state svg { width: 36px; height: 36px; }
}
@media (hover: none) and (pointer: coarse) {
.ai3d-btn,
.ai3d-ctrl-btn,
.ai3d-listing-btn,
.ai3d-bg-swatch,
.ai3d-modal-close {
touch-action: manipulation;
}
}