/* ── 3D gallery state ── */
.aipaou-3d-active .woocommerce-product-gallery__image,
.aipaou-3d-active .woocommerce-product-gallery__image--placeholder {
    opacity: 0;
    pointer-events: none;
}

/* ── Shared 3D wrap ── */
.aipaou-3d-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}
.aipaou-3d-wrap.pewc-hidden-field {
    display: none;
}

/* ── Print Only ── */
.aipaou-print-only {
    background: transparent;
}
.aipaou-print-only .aipaou-3d-main-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* ── Canvas 3D: CSS preserve-3d box ──
   All three faces live inside one preserve-3d container so their geometry
   is mathematically consistent. The container is rotated so the front face
   recedes to the right (left edge taller than right edge) and the top and
   left panels naturally connect.

   rotateY(-30deg): front face recedes to the right
   rotateX(10deg):  tilt slightly so we see the top face
*/
.aipaou-canvas-3d {
    --d: 35px;
    align-items: center;
    justify-content: center;
    perspective: 700px;
    filter: drop-shadow( 6px 18px 22px rgba(0,0,0,0.45) )
            drop-shadow( 2px 4px 6px rgba(0,0,0,0.22) );
}

.aipaou-3d-scene {
    position: relative;
    width: 75%;
    aspect-ratio: 1 / 1;
    transform-style: preserve-3d;
    transform: rotateX(3deg) rotateY(30deg) translateY(-9%);
    flex-shrink: 0;
}

/* Front face — fills the scene square, slightly rounded corners for canvas feel */
.aipaou-face-front {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    backface-visibility: visible;
    border-radius: 3px;
    overflow: hidden;
}

/* Left panel */
.aipaou-face-left {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--d);
    height: 100%;
    transform-origin: right center;
    transform: translateX( calc( -1 * var(--d) ) ) rotateY( -90deg );
    background-color: #444;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    backface-visibility: visible;
    border-radius: 3px 0 0 3px;
    overflow: hidden;
}

/* Top panel */
.aipaou-face-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--d);
    transform-origin: bottom center;
    transform: translateY( calc( -1 * var(--d) ) ) rotateX( 90deg );
    background-color: #555;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    backface-visibility: visible;
    border-radius: 3px 3px 0 0;
    overflow: hidden;
}

/* Edge colour overrides */
.aipaou-edge-white .aipaou-face-left {
    background-color: #d8d8d8;
}
.aipaou-edge-white .aipaou-face-top {
    background-color: #efefef;
}
/* Mirror: JS sets background-image and background-size inline on each panel */
.aipaou-edge-mirror .aipaou-face-left,
.aipaou-edge-mirror .aipaou-face-top {
    background-color: transparent;
}

.aipaou-customer-fields {
    margin-bottom: 15px;
}

.aipaou-customer-fields label.pewc-field-label {
    margin-top: 15px;
    display: block;
}

.woocommerce-product-gallery img {
    margin: 0 auto !important;
}

.aipaou-font-loading {
    color: blue;
}
.aipaou-font-error {
    color: red;
}
.selectGFontContainer .select2-results__option {
    margin-bottom: 0;
}
.aipaou-text-layer {
  text-align: center;
}
.pewc-has-image-preview .woocommerce-product-gallery__image {
  pointer-events: none;
}
.aipaou-thumb-flat,
.aipaou-thumb-3d {
  pointer-events: auto;
}
.woocommerce-product-gallery {
  position: relative;
}

/* ── Preview thumbnails ── */
.aipaou-thumb-flat {
    display: block;
    width: 100%;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.aipaou-thumb-flat:hover,
.aipaou-thumb-flat.aipaou-thumb-active {
    opacity: 1;
}

/* 3D thumb: square block matching image thumb proportions */
.aipaou-thumb-3d {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 100%;
    background: #f5f5f5;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
    box-sizing: border-box;
}
.aipaou-thumb-3d:hover,
.aipaou-thumb-3d.aipaou-thumb-active {
    opacity: 1;
}

/* mini 3d scene — centred inside the square span */
.aipaou-thumb-3d .aipaou-mini-scene-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.aipaou-mini-scene {
    --md: 6px;
    position: relative;
    width: 65%;
    aspect-ratio: 1 / 1;
    transform-style: preserve-3d;
    transform: perspective(200px) rotateX(3deg) rotateY(30deg);
}
.aipaou-mini-front {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    border-radius: 1px;
    overflow: hidden;
}
.aipaou-mini-left {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--md);
    height: 100%;
    transform-origin: right center;
    transform: translateX( calc( -1 * var(--md) ) ) rotateY( -90deg );
    background-color: #444;
    border-radius: 1px 0 0 1px;
    backface-visibility: visible;
}
.aipaou-mini-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--md);
    transform-origin: bottom center;
    transform: translateY( calc( -1 * var(--md) ) ) rotateX( 90deg );
    background-color: #555;
    border-radius: 1px 1px 0 0;
    backface-visibility: visible;
}

/* ── Thumbnail strip ── */
.aipaou-thumb-strip {
    clear: both;
    overflow: hidden;
    zoom: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    z-index: 20;
    transform: translateY(50px);
}
.aipaou-thumb-strip li {
    width: 25%;
    float: left;
    margin: 0;
    list-style: none;
}
.aipaou-thumb-strip li img {
    margin: 0;
}