/* AR-116: AtlasAR on shop pages (WordPress adapter). The viewer SDK styles its own parts. */
.atlas-ar-viewer{display:block;width:100%}
/* :where() = no specificity: a theme's content width (block themes' constrained layout) wins; else never wider than the column. */
:where(.atlas-ar-shortcode){max-width:100%}
.atlas-ar-shortcode{position:relative;box-sizing:border-box}
.atlas-ar-shortcode .atlas-ar-viewer{height:100%}
.atlas-ar-after-content{margin:1.5em 0;display:flex;flex-direction:column;gap:12px}

/* Gallery: the 3D view over the main product image */
.atlas-ar-gallery-target{position:relative}
.atlas-ar-gallery-overlay{position:absolute;inset:0;z-index:5;background:#fff}
.atlas-ar-gallery-overlay[hidden]{display:none}
.atlas-ar-gallery-overlay .atlas-ar-viewer{height:100%}
.atlas-ar-gallery-overlay:fullscreen{background:#fff}
/* Top left: WooCommerce's zoom icon is top right, the SDK's AR / phone buttons are at the bottom. */
.atlas-ar-gallery-bar{position:absolute;left:12px;top:12px;z-index:6;display:flex;gap:8px}
.atlas-ar-gallery-btn{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #c3c4c7;border-radius:50%;background:#fff;color:#1d2327;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.atlas-ar-gallery-btn[hidden]{display:none}
.atlas-ar-gallery-btn:focus-visible{outline:2px solid #2271b1;outline-offset:2px}
/* Themes colour every button on :hover / :focus (Astra: blue): the gallery buttons stay white. */
html body button.atlas-ar-gallery-btn:is(:hover,:focus,:active){background:#f6f7f7;color:#1d2327;border-color:#c3c4c7;text-transform:none;box-shadow:0 1px 3px rgba(0,0,0,.15)}
/* A square slide like the photos; the viewer fills it (a % height needs a sized box). */
.atlas-ar-slide{position:relative;aspect-ratio:1/1}
.atlas-ar-slide .atlas-ar-viewer{position:absolute;inset:0;width:100%;height:100%}
/* "3D" badge on the 3D slide's gallery thumbnail */
.flex-control-thumbs li.atlas-ar-thumb-3d{position:relative}
.flex-control-thumbs li.atlas-ar-thumb-3d img{background:#f0f0f1}
.flex-control-thumbs li.atlas-ar-thumb-3d::after{content:"3D";position:absolute;right:4px;bottom:4px;padding:1px 5px;border-radius:3px;background:rgba(29,35,39,.85);color:#fff;font:700 10px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.03em;pointer-events:none}

/* Try-on button: the same pill as the viewer's "View in 3D" button (viewer SDK .atlasar-trigger), so
   the two match on every theme. Block themes do not style the classic .button class, and classic
   themes style it in their own colour (Astra: ".woocommerce-js button.button", blue): this selector
   outranks both, in every state. */
html body button.atlas-ar-tryon-button.atlas-ar-tryon-button,html body button.atlas-ar-tryon-button.atlas-ar-tryon-button:is(:hover,:focus,:active){display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:44px;margin:10px 0 0;padding:10px 18px;border:0;border-radius:999px;background:var(--atlas-ar-button-bg,#111827);color:var(--atlas-ar-button-fg,#fff);font:inherit;font-size:15px;font-weight:600;line-height:1.4;text-transform:none;letter-spacing:normal;text-decoration:none;text-shadow:none;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer}
html body button.atlas-ar-tryon-button.atlas-ar-tryon-button:hover{filter:brightness(1.15)}
html body button.atlas-ar-tryon-button.atlas-ar-tryon-button:focus-visible{outline:2px solid var(--atlas-ar-button-bg,#111827);outline-offset:2px}
.atlas-ar-tryon-icon{width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;box-sizing:border-box;position:relative}
.atlas-ar-tryon-icon::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:3px;border-top:1.5px solid currentColor}

/* AR-156: size and frame from the settings (CSS variables set on the element by the plugin). */
.atlas-ar-viewer{--atlas-ar-h-now:var(--atlas-ar-h,420px);border:var(--atlas-ar-border,0) solid var(--atlas-ar-border-color,transparent);border-radius:var(--atlas-ar-radius,0);box-shadow:var(--atlas-ar-shadow,none);overflow:var(--atlas-ar-overflow,visible);box-sizing:border-box}
@media (max-width:600px){.atlas-ar-viewer{--atlas-ar-h-now:var(--atlas-ar-h-mobile,var(--atlas-ar-h,420px))}}