/* ── 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;
}

/* suppresses the browser's native text/element selection page-wide while a
   drag/resize/rotate gesture is active - see block_native_selection() in
   scripts.js. Without this, a pointer that outruns the dragged element (e.g.
   past the product image edge) makes the browser fall back to selecting
   whatever page content it passes over instead */
body.aipaou-no-select {
    user-select: none;
    -webkit-user-select: none;
}

/* ── Customer drag/resize of the image layer ── */
/* fills layer_parent exactly and clips its contents, so the draggable/
   resizable/rotatable layer can never visually escape the product image's
   own bounds - see create_image_layer() in scripts.js */
.aipaou-layer-clip {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}
/* per-field clip-path scoped to just this field's "Set image area" boundary
   (interactive_over only) - see create_image_layer() in scripts.js. A
   clip-path here (rather than on the shared .aipaou-layer-clip, which every
   field targeting the same product image renders into) keeps one field's
   boundary from also clipping a sibling field's layer */
.aipaou-area-clip {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/* pointer-events/cursor are only turned on for fields where
   field_preview_position is 'interactive_behind' - enable_positioning() in
   scripts.js adds this class, so a 'non_interactive' layer (the default,
   including for products saved before this setting existed) stays a plain
   visual overlay that clicks pass through, as it always has */
.aipaou-layer-clip .aipaou-image-layer.aipaou-positioning-enabled {
    pointer-events: auto;
}
.aipaou-image-layer {
    touch-action: none;
    box-sizing: border-box;
    border: 1px dashed transparent;
}
.aipaou-image-layer.aipaou-positioning-enabled {
    cursor: move;
}
.aipaou-image-layer:hover,
.aipaou-image-layer.aipaou-positioning-active {
    border-color: rgba(0, 0, 0, 0.35);
}
.aipaou-image-layer img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
}
/* only created when field_image_z_index is negative (image behind the main
   product photo) - see create_image_layer() in scripts.js. Mirrors the real
   layer's box on top of the product photo, since that's the only way to keep
   drag/resize/rotate usable while the actual layer is hidden underneath.
   Always interactive (unlike .aipaou-image-layer, which stays click-through
   until positioning is enabled) since it's only ever created for interactive
   fields in the first place */
.aipaou-layer-overlay {
    touch-action: none;
    box-sizing: border-box;
    cursor: move;
    pointer-events: auto;
    border: 1px dashed rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.08);
}
.aipaou-layer-overlay:hover {
    border-color: rgba(0, 0, 0, 0.7);
}
/* shows the customer where they can drag/resize/rotate to, when the admin has
   drawn a custom area via "Set image area" (interactive_over only) - purely
   visual, doesn't intercept clicks */
/* spans the whole clip container - clip-path (set in scripts.js) does the
   actual shaping, since border can't trace an arbitrary rotated/skewed/
   circular polygon the way it can an axis-aligned box */
.aipaou-image-area-boundary {
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    background: rgba(0, 100, 200, 0.12);
    box-shadow: inset 0 0 0 1px rgba(0, 100, 200, 0.6);
    z-index: 15;
}
.aipaou-rotate-handle {
    position: absolute;
    top: -28px;
    left: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    cursor: alias;
    touch-action: none;
    z-index: 1;
}
.aipaou-rotate-handle::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 14px;
    background: rgba(0, 0, 0, 0.45);
    transform: translateX( -50% );
}
/* positioned relative to the product image itself (the layer's own parent,
   see enable_positioning()) rather than the draggable/rotatable layer, so it
   stays fixed in the corner regardless of the uploaded image's position,
   size, or rotation */
.aipaou-reset-handle {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    cursor: pointer;
    touch-action: none;
    z-index: 20;
}
.aipaou-reset-handle:hover {
    background: #f0f0f0;
}
.aipaou-reset-handle.pewc-hidden-field {
    display: none;
}
/* sits directly left of the Reset button, same fixed corner positioning */
.aipaou-fitfill-handle {
    position: absolute;
    bottom: 8px;
    right: 68px;
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.4;
    white-space: nowrap;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.45);
    border-radius: 3px;
    cursor: pointer;
    touch-action: none;
    z-index: 20;
}
.aipaou-fitfill-handle:hover {
    background: #f0f0f0;
}
.aipaou-fitfill-handle.pewc-hidden-field {
    display: none;
}
/* when more than one interactive_behind field shares the same product image,
   only the active field's Reset/Fill buttons are shown - see
   set_active_field() in scripts.js - otherwise every field's buttons would
   render in the same corner, hiding all but the topmost */
.aipaou-reset-handle.aipaou-inactive-field,
.aipaou-fitfill-handle.aipaou-inactive-field {
    display: none;
}

.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;
}