/* 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-176: product cards (shop, category pages, related products, product blocks).
   The button carries the theme's own button classes (block themes: wp-element-button /
   wp-block-button__link with the outline or fill style; classic themes: WooCommerce's .button),
   so colours, radius and type come from the theme. Only layout is set here. */
.atlas-ar-card-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;container-type:inline-size}
/* Narrow cards (phones, 2 a row): each button on its own full-width line, a little less side padding, so the label fits. */
@container (max-width:240px){.atlas-ar-card-actions>*{flex:1 1 100%}.atlas-ar-card-actions>* .wp-block-button__link,.atlas-ar-card-actions>* .button{width:100%}.atlas-ar-card-actions .atlas-ar-card-button{padding-left:.75em;padding-right:.75em}.atlas-ar-card-actions .atlas-ar-card-button .atlas-ar-card-icon{display:none}}
/* Cards that are flex columns (WooCommerce's product blocks): the row sits at the bottom, level across cards whose titles wrap differently. */
.wc-block-product>.atlas-ar-card-actions{margin-top:auto}
.atlas-ar-card-actions>.wp-block-button,.atlas-ar-card-actions>.wc-block-components-product-button,.atlas-ar-card-actions>.atlas-ar-card-button-wrap{margin:0;width:auto;min-width:0;max-width:100%}
/* Never wider than the card (phones: 2 cards a row, ~150 px each): the label wraps instead. */
.atlas-ar-card-button-wrap{display:inline-flex;vertical-align:middle;min-width:0;max-width:100%}
/* Classic loops: next to the theme's "Add to cart" link (before or after it); a gap when it wraps to its own line. */
li.product .atlas-ar-card-button-wrap{margin:4px 0}
li.product .button+.atlas-ar-card-button-wrap,li.product .atlas-ar-card-button-wrap+.button{margin-left:8px}
/* Type, size, padding and colours come from the theme's button styles: nothing of our own here. */
.atlas-ar-card-button{display:inline-flex;align-items:center;justify-content:center;gap:.45em;height:auto;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;cursor:pointer}
/* The same text size as the card's "Add to cart" (WooCommerce's block sets a preset size). */
.atlas-ar-card-actions:has(.has-small-font-size) .atlas-ar-card-button{font-size:var(--wp--preset--font-size--small,inherit)}
.atlas-ar-card-actions:has(.has-medium-font-size) .atlas-ar-card-button{font-size:var(--wp--preset--font-size--medium,inherit)}
.atlas-ar-card-icon{flex:none;width:1em;height:1em}
.atlas-ar-card-button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* The picture with the 3D badge (bottom right; WooCommerce's sale badge is top left). Dark on white: 14.9:1. */
.atlas-ar-card-media{position:relative;display:block}
.atlas-ar-card-media--image>.wc-block-components-product-image{margin-bottom:0}
html body .atlas-ar-card-badge,html body .atlas-ar-card-badge:is(:hover,:focus,:active){position:absolute;right:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:999px;background:#1d2327;color:#fff;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.25);line-height:1}
html body .atlas-ar-card-badge:hover{background:#2c3338}
html body .atlas-ar-card-badge:focus-visible{outline:2px solid #fff;outline-offset:0;box-shadow:0 0 0 4px #1d2327}
.atlas-ar-card-badge .atlas-ar-card-icon{width:20px;height:20px}
/* Classic loops: the badge sits next to the card's link, pinned to the top-right corner of the picture. */
li.product{position:relative}
html body li.product .atlas-ar-card-badge--corner{top:10px;right:10px;bottom:auto;z-index:3}
/* The 3D view first: a square like the product pictures; the poster shows, the model loads on a click. */
.atlas-ar-card-media--3d{aspect-ratio:1/1;overflow:hidden;background:#f6f7f7}
.atlas-ar-card-media--3d .atlas-ar-viewer{position:absolute;inset:0;width:100%;height:100%;--atlas-ar-h-now:100%}
/* The popup element a card builds on the first click: only its window shows. */
.atlas-ar-viewer--card-popup{display:block;width:0;height:0;overflow:visible;border:0;box-shadow:none}
.atlas-ar-viewer--card-popup>.atlasar-trigger-wrap{display:none}

/* 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))}}