.ld-woo-gallery-layout,
.ld-woo-single-product-image,
.ld-woo-scene-widget,
.ld-customer-frame-preview {
    display: grid;
    gap: var(--ld-gallery-gap, 16px);
}

.ld-woo-gallery-hero,
.ld-woo-gallery-item,
.ld-woo-single-image-figure,
.ld-woo-scene-figure,
.ld-customer-frame-preview-figure {
    margin: 0;
}

.ld-woo-gallery-grid {
    display: grid;
    gap: var(--ld-gallery-gap, 16px);
}

.ld-woo-gallery-link,
.ld-woo-gallery-static,
.ld-woo-single-image-link,
.ld-woo-single-image-static,
.ld-woo-scene-link,
.ld-woo-scene-static,
.ld-customer-frame-preview-link,
.ld-customer-frame-preview-static {
    display: block;
    text-decoration: none;
    color: inherit;
}

.ld-woo-gallery-image-wrap,
.ld-woo-single-image-wrap,
.ld-woo-scene-product-wrap,
.ld-customer-frame-preview-wrap {
    display: block;
    position: relative;
}

.ld-woo-gallery-frame-shell,
.ld-woo-single-frame-shell,
.ld-woo-scene-frame-shell {
    display: block;
    border-radius: var(--ld-frame-radius, 0px);
}

.ld-woo-gallery-frame-shell.has-frame,
.ld-woo-single-frame-shell.has-frame,
.ld-woo-scene-frame-shell.has-frame {
    padding: var(--ld-frame-padding, 16px);
}

.ld-woo-gallery-frame-inner,
.ld-woo-single-frame-inner,
.ld-woo-scene-frame-inner {
    display: block;
    background: var(--ld-frame-mat-color, #ffffff);
    padding: var(--ld-frame-mat-padding, 6px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: max(calc(var(--ld-frame-radius, 0px) - 2px), 0px);
}

.ld-woo-single-media-stage,
.ld-woo-scene-media-stage,
.ld-customer-frame-media-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 794 / 1123;
    overflow: hidden;
    background: var(--ld-frame-mat-color, #ffffff);
}

.ld-woo-single-media-stage.is-horizontal,
.ld-woo-scene-media-stage.is-horizontal,
.ld-customer-frame-media-stage.is-horizontal {
    aspect-ratio: 1123 / 794;
}

.ld-woo-gallery-image-wrap img.ld-woo-gallery-image,
.ld-woo-single-image-wrap img.ld-woo-single-image,
.ld-woo-scene-product-wrap img.ld-woo-scene-image,
.ld-customer-frame-preview-wrap img.ld-customer-frame-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ld-image-radius, 0px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, var(--ld-image-shadow-opacity, 0.10));
}

.ld-woo-single-media-stage.is-vertical img.ld-woo-single-image,
.ld-woo-scene-media-stage.is-vertical img.ld-woo-scene-image,
.ld-customer-frame-media-stage.is-vertical img.ld-customer-frame-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ld-woo-single-media-stage.is-horizontal img.ld-woo-single-image,
.ld-woo-scene-media-stage.is-horizontal img.ld-woo-scene-image,
.ld-customer-frame-media-stage.is-horizontal img.ld-customer-frame-image {
    width: auto;
    height: 100%;
    max-width: none;
    transform: rotate(90deg) scale(1.41421356);
    transform-origin: center center;
}

.ld-frame-oak,
.ld-frame-wood {
    background: linear-gradient(135deg, #ead6b0 0%, #d8b179 18%, #c89557 34%, #efdeb8 51%, #b88148 68%, #9a6735 84%, #eed6aa 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 0 3px rgba(117,81,39,.18), 0 0 0 1px rgba(110,74,35,.18), 8px 12px 22px rgba(0,0,0,.18);
}
.ld-frame-walnut {
    background: linear-gradient(135deg, #8a6440 0%, #5d3b21 18%, #3f2515 35%, #9d7650 52%, #4f311b 71%, #2f1a0e 88%, #7d5938 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 3px rgba(35,19,9,.28), 0 0 0 1px rgba(28,14,7,.35), 8px 12px 22px rgba(0,0,0,.22);
}
.ld-frame-black {
    background: linear-gradient(135deg, #505050 0%, #111111 22%, #000000 48%, #2c2c2c 72%, #060606 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 3px rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.45), 8px 12px 22px rgba(0,0,0,.24);
}
.ld-frame-brass {
    background: linear-gradient(135deg, #f8ebb0 0%, #d8b340 19%, #b98d14 35%, #fff3be 51%, #d6ab2f 69%, #9f7708 86%, #f2db82 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.50), inset 0 0 0 3px rgba(143,105,10,.18), 0 0 0 1px rgba(161,120,8,.24), 8px 12px 22px rgba(0,0,0,.18);
}
.ld-frame-white {
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 24%, #ececec 48%, #d9d9d9 74%, #fafafa 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 0 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.08), 8px 12px 22px rgba(0,0,0,.12);
}

.ld-woo-scene-stage {
    position: relative;
    width: 100%;
    min-height: var(--ld-scene-height, 620px);
    overflow: hidden;
    background-color: #f3f3f3;
    background-image: var(--ld-scene-bg-image, none);
    background-size: var(--ld-scene-bg-size, cover);
    background-position: var(--ld-scene-bg-position, center center);
    background-repeat: no-repeat;
    border-radius: var(--ld-scene-radius, 0px);
}

.ld-woo-scene-bg-tint {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--ld-scene-tint-opacity, 0));
    z-index: 1;
    pointer-events: none;
}

.ld-woo-scene-product {
    position: absolute;
    left: var(--ld-scene-x, 50%);
    top: var(--ld-scene-y, 50%);
    width: var(--ld-scene-product-width, 30%);
    max-width: min(90%, var(--ld-scene-product-max-width, 380px));
    z-index: 2;
    transform: translate(-50%, -50%) rotate(var(--ld-scene-rotation, 0deg)) scale(var(--ld-scene-scale, 1));
    filter: drop-shadow(var(--ld-scene-shadow-x, 0px) var(--ld-scene-shadow-y, 16px) var(--ld-scene-shadow-blur, 28px) rgba(0,0,0,var(--ld-scene-shadow-opacity,.18)));
}

.ld-woo-scene-foreground {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--ld-scene-foreground-size, cover);
    object-position: var(--ld-scene-foreground-position, center center);
    opacity: var(--ld-scene-foreground-opacity, 1);
    z-index: 3;
    pointer-events: none;
}

/* Customer preview isolated styles */
.ld-customer-frame-shell {
    display: block;
    border-radius: var(--ld-cfp-frame-radius, 0px);
}

.ld-customer-frame-shell.has-frame {
    padding: var(--ld-cfp-frame-padding, 16px);
}

.ld-customer-frame-inner {
    display: block;
    background: var(--ld-cfp-mat-color, #ffffff);
    padding: var(--ld-cfp-frame-mat-padding, 6px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: max(calc(var(--ld-cfp-frame-radius, 0px) - 2px), 0px);
}

.ld-cfp-frame--oak,
.ld-cfp-frame--wood {
    background: linear-gradient(135deg, #ead6b0 0%, #d8b179 18%, #c89557 34%, #efdeb8 51%, #b88148 68%, #9a6735 84%, #eed6aa 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 0 3px rgba(117,81,39,.18), 0 0 0 1px rgba(110,74,35,.18), 8px 12px 22px rgba(0,0,0,.18);
}
.ld-cfp-frame--walnut {
    background: linear-gradient(135deg, #8a6440 0%, #5d3b21 18%, #3f2515 35%, #9d7650 52%, #4f311b 71%, #2f1a0e 88%, #7d5938 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 3px rgba(35,19,9,.28), 0 0 0 1px rgba(28,14,7,.35), 8px 12px 22px rgba(0,0,0,.22);
}
.ld-cfp-frame--black {
    background: linear-gradient(135deg, #505050 0%, #111111 22%, #000000 48%, #2c2c2c 72%, #060606 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), inset 0 0 0 3px rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.45), 8px 12px 22px rgba(0,0,0,.24);
}
.ld-cfp-frame--brass {
    background: linear-gradient(135deg, #f8ebb0 0%, #d8b340 19%, #b98d14 35%, #fff3be 51%, #d6ab2f 69%, #9f7708 86%, #f2db82 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.50), inset 0 0 0 3px rgba(143,105,10,.18), 0 0 0 1px rgba(161,120,8,.24), 8px 12px 22px rgba(0,0,0,.18);
}
.ld-cfp-frame--white {
    background: linear-gradient(135deg, #ffffff 0%, #f9f9f9 24%, #ececec 48%, #d9d9d9 74%, #fafafa 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.95), inset 0 0 0 3px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.08), 8px 12px 22px rgba(0,0,0,.12);
}

.ld-customer-frame-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ld-cfp-selector-gap, 10px);
    justify-content: var(--ld-cfp-selector-align, flex-start);
}

.ld-customer-frame-option {
    appearance: none;
    border: 1px solid #d6d6d6;
    background: #fff;
    color: #222;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.2;
    cursor: pointer;
    transition: all .2s ease;
}

.ld-customer-frame-option:hover {
    border-color: #222;
}

.ld-customer-frame-option.is-active,
.ld-customer-frame-option[aria-pressed="true"] {
    background: #222;
    border-color: #222;
    color: #fff;
}

.ld-customer-frame-note {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.ld-woo-gallery-empty,
.ld-woo-single-image-empty,
.ld-woo-scene-empty,
.ld-customer-frame-empty {
    margin: 0;
}