/* Photograph layout only. The original image files, labels and shade colours
   are unchanged. Studio backgrounds continue behind the entire surface. */
body #main{--photo-surface:#272A2E;--photo-gap:16px;--scene-bleed:32px}

/* A measured object box removes transparent export margins from alignment. */
body #main .photo-object-stage{
 position:relative;isolation:isolate;container-type:size;
 display:flex;align-items:center;justify-content:center;gap:var(--photo-gap);
 min-width:0;--photo-count:1
}
body #main [data-photo-count="2"]{--photo-count:2}
body #main [data-photo-count="3"]{--photo-count:3}
body #main .photo-object{
 position:relative;display:block;flex:none;isolation:isolate;z-index:1;
 width:calc((100% - (var(--photo-count,1) - 1)*var(--photo-gap,16px))/var(--photo-count,1));
 height:auto;aspect-ratio:var(--object-ratio);max-height:100%;
 margin:0;padding:0;direction:ltr;overflow:visible
}
@supports(width:1cqw){
 body #main .photo-object-stage>.photo-object{
  width:min(calc((100cqw - (var(--photo-count,1) - 1)*var(--photo-gap,16px))/var(--photo-count,1)),calc(100cqh * var(--object-ratio)));
  max-height:none
 }
}
body #main .photo-object>:is(img,svg){
 position:absolute!important;inset:auto!important;
 left:var(--object-image-left)!important;top:var(--object-image-top)!important;
 width:var(--object-image-width)!important;height:var(--object-image-height)!important;
 max-width:none!important;max-height:none!important;min-width:0!important;
 object-fit:fill!important;object-position:center!important;aspect-ratio:auto!important;
 padding:0!important;margin:0!important;display:block;flex:none;
 background:transparent!important;border:0!important;border-radius:0!important;
 transform:none!important;translate:none!important;scale:none!important;
 -webkit-mask-image:none!important;mask-image:none!important;filter:none!important;
 opacity:1;mix-blend-mode:normal
}

/* Jars touch a shared floor instead of floating above a card-wide backdrop. */
body #main .packaging-art.photo-ground-stage{
 align-items:flex-end;box-sizing:border-box;padding:14px 20px 20px;
 gap:var(--photo-gap);overflow:visible
}
body #main .photo-object--jar{align-self:flex-end}
body #main .photo-object--jar::before{
 content:'';position:absolute;left:4%;bottom:-1%;width:92%;height:6%;
 border-radius:50%;background:rgba(0,0,0,.28);filter:blur(4px);
 transform:none;z-index:-1;pointer-events:none
}
body #main :is(.material-card,.material-mini,.shade-card).has-packaging,
body #main :is(.product-image,.detail-visual):has(>.packaging-art){
 position:relative;isolation:isolate;overflow:hidden;background:var(--photo-surface)
}
body #main :is(.material-card,.material-mini,.shade-card).has-packaging>:not(.packaging-art){position:relative;z-index:2}
body #main :is(.material-card,.material-mini,.shade-card,.product-image,.detail-visual) .packaging-art{
 isolation:auto;background:transparent
}
body #main :is(.material-card,.material-mini,.shade-card,.product-image,.detail-visual) .packaging-art::before{
 content:'';position:absolute;display:block;inset:0;pointer-events:none;z-index:-1;
 background:var(--studio-backdrop) center/100% 100% no-repeat;
 -webkit-mask-image:none;mask-image:none
}
body #main :is(.material-card,.material-mini,.shade-card,.product-image,.detail-visual) .packaging-art::after{
 content:'';position:absolute;display:block;inset:calc(-1 * var(--scene-bleed));pointer-events:none;z-index:-2;
 box-sizing:border-box;border:var(--scene-bleed) solid transparent;
 border-image-source:var(--studio-backdrop);border-image-slice:1;
 border-image-width:var(--scene-bleed);border-image-outset:0;border-image-repeat:stretch
}
body #main .packaging-cover .packaging-stage>.packaging-art{padding:14px 20px 20px;gap:16px}
body #main .packaging-art>.photo-object--jar>:is(img,svg){transition:none!important}

/* Alpha product photos are fitted by their actual bounds, not their canvas. */
body #main :is(.directory-card-art,.catalog-art,.product-image,.uae-collection-cover,
 .uae-new-art,.category-cover-thumbnail).photo-object-stage{
 padding:24px;box-sizing:border-box;background:var(--photo-surface)
}
body #main :is(.directory-card-art,.catalog-art,.product-image,.uae-collection-cover,
 .uae-new-art,.category-cover-thumbnail).photo-object-stage::before{display:none}
body #main .detail-visual.photo-object-stage{height:clamp(320px,40vw,520px);padding:32px;box-sizing:border-box}
body #main .detail-figure.photo-object-stage{container-type:normal;display:block;height:auto;padding:28px}
body #main .detail-figure.photo-object-stage>.photo-object{width:min(90%,calc(260px * var(--object-ratio)));height:auto;max-height:none;margin:0 auto 18px}
body #main .sh-index-thumb.photo-object-stage{padding:6px}
body #main .home-studio-piece.photo-object-stage{position:absolute;display:block;container-type:normal;isolation:isolate}
body #main .home-studio-piece.photo-object-stage>.photo-object{width:100%;height:auto;max-height:none}
body #main .home-studio-piece--ceramic{width:17%;left:41%;bottom:1%}
body #main .home-studio-piece--ceramic .photo-object::before{background:rgba(0,0,0,.22)}

/* One continuous studio, not a feathered rectangle on a different grey.
   border-image paints only outside the photograph (no `fill`). Its sampled
   perimeter continues the wall/floor into the containing band or card, then
   settles into the graphite surface before reaching the text.
   The foreground is a separate, fully opaque original; it is never blurred,
   tinted, masked, mirrored or used as a stretched backdrop. */
body #main .photo-continuous-surface{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--photo-surface);color:#fff;
 --card-ink:#fff;--home-muted:#C8CDD3;
 --link-ink:var(--accent-on-dark);--action-fill:var(--accent-on-dark);
 --action-border:var(--accent-on-dark);--primary-border-width:0px
}
body #main .photo-continuous-surface :is(.category-cover-stage,.resin-cover-stage,.home-visual-stage){
 isolation:auto;background:transparent
}
body #main .photo-scene-stage:not(.photo-continuous-surface){
 background:transparent;isolation:auto;overflow:visible;z-index:auto
}
body #main .photo-scene-stage{animation:none!important;transform:none}
body #main .photo-scene{
 position:relative;display:block;flex:none;isolation:auto;direction:ltr;z-index:auto;
 width:100%;height:auto;aspect-ratio:var(--scene-ratio);margin:0;
 overflow:visible;border-radius:0;-webkit-mask-image:none;mask-image:none
}
body #main .photo-scene::before{
 content:'';position:absolute;inset:calc(-1 * var(--scene-bleed));pointer-events:none;z-index:-1;
 box-sizing:border-box;border:var(--scene-bleed) solid transparent;
 border-image-source:var(--scene-source);
 border-image-slice:var(--scene-slices);
 border-image-width:var(--scene-bleed);border-image-outset:0;
 border-image-repeat:stretch
}
/* This mask affects only the added background outside the original image.
   At the join it is fully opaque; products and labels have no opacity mask.
   The short exterior blend also keeps reflected floor light away from text. */
body #main .photo-scene::before,
body #main :is(.material-card,.material-mini,.shade-card,.product-image,.detail-visual) .packaging-art::after{
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--scene-bleed),#000 calc(100% - var(--scene-bleed)),transparent),linear-gradient(180deg,transparent,#000 var(--scene-bleed),#000 calc(100% - var(--scene-bleed)),transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 var(--scene-bleed),#000 calc(100% - var(--scene-bleed)),transparent),linear-gradient(180deg,transparent,#000 var(--scene-bleed),#000 calc(100% - var(--scene-bleed)),transparent);
 mask-composite:intersect
}
body #main .photo-scene-viewport{
 position:absolute;display:block;inset:0;overflow:hidden;border-radius:0;
 direction:ltr;background:transparent
}
body #main .photo-scene-viewport>:is(img,svg){
 position:absolute!important;inset:auto!important;
 left:var(--scene-left)!important;top:var(--scene-top)!important;
 width:var(--scene-width)!important;height:var(--scene-height)!important;
 max-width:none!important;max-height:none!important;min-width:0;
 object-fit:fill!important;object-position:center!important;aspect-ratio:auto!important;
 padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
 transform:none!important;translate:none!important;scale:none!important;
 -webkit-mask-image:none!important;mask-image:none!important;
 filter:none!important;opacity:1;mix-blend-mode:normal;z-index:0!important
}
body #main .photo-scene--cover{order:1}
body #main :is(.category-cover-stage,.resin-cover-stage)>.photo-scene--cover{align-self:center}

/* Full-bleed covers have no inset side rails, even on very wide displays.
   Text keeps its readable measure; the original picture retains its ratio. */
body #main :is(.category-cover,.resin-cover).photo-continuous-surface{padding-bottom:0}
body #main :is(.category-cover,.resin-cover).photo-continuous-surface>.container{width:100%;max-width:none}
body #main .photo-continuous-surface :is(.category-cover-content,.resin-cover-content){width:min(920px,calc(100% - 64px))}
body #main :is(.category-cover,.resin-cover).photo-continuous-surface .breadcrumb{width:min(1200px,calc(100% - 64px));margin-inline:auto;position:relative;z-index:1}

/* Fit to the card width without letterboxing. Only the outer card clips the
   backdrop continuation; an inner viewport retains the reviewed source crop. */
body #main :is(.directory-card-art,.catalog-art,.product-image,.uae-collection-cover,
 .uae-new-art,.category-cover-thumbnail,.uae-summary-cover,.home-promo .home-visual-media).photo-scene-stage{
 position:relative;container-type:normal;display:block;width:100%;
 height:auto;min-height:0;max-height:none;aspect-ratio:auto;padding:0
}
body #main .photo-scene-stage::before,body #main .photo-scene-stage::after{display:none}
body #main .editorial-support-art.photo-scene-stage{width:100%;height:auto;margin-top:32px}
body #main .editorial-department-art.photo-scene-stage{height:auto;padding:0}
body #main .sh-group-image.photo-scene-stage{height:auto;min-height:0}
body #main .sh-feature.photo-scene-stage{display:block}
body #main .sh-feature.photo-continuous-surface h4{color:#fff}
body #main .sh-feature.photo-continuous-surface :is(p,small,.sh-feature-link){color:var(--accent-on-dark)}
body #main .photo-continuous-surface :is(.editorial-department-copy,.sh-group-intro,.directory-card-copy,.product-card-info,.home-collection-details){position:relative;z-index:1}
body #main .home-promo.photo-continuous-surface .home-visual-media{z-index:auto}
body #main .home-promo.photo-continuous-surface .home-visual-copy{color:#fff}
body #main .home-showcase--photographic .photo-scene--feature{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;margin:0}
body #main .home-showcase--photographic .photo-scene--feature .photo-scene-viewport>img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:right center!important}

/* Live product previews use the same floor contact, without modifying picker
   state, image selection, error handling or form markup. */
body :is(.vp-picture,.quote-line__picture,.search-result-image) img{object-fit:contain;object-position:center}
body .vp-picture:has(>img[src*="/packaging/"]),
body .vp-picture:has(>img[src*="/packaging-materials/"]){isolation:isolate;position:relative}
body .vp-picture>img[src*="/packaging/"],body .vp-picture>img[src*="/packaging-materials/"]{
 filter:drop-shadow(0 2px 1px rgba(0,0,0,.18));transform:none;object-position:center bottom
}

@media(max-width:833px){
 body #main{--photo-gap:10px;--scene-bleed:24px}
 body #main .packaging-art.photo-ground-stage{padding:10px 12px 16px}
 body #main .packaging-cover .packaging-stage>.packaging-art{padding:10px 12px 16px;gap:10px}
 body #main :is(.directory-card-art,.catalog-art,.product-image,.uae-collection-cover,
  .uae-new-art,.category-cover-thumbnail).photo-object-stage{padding:20px}
 body #main .photo-continuous-surface :is(.category-cover-content,.resin-cover-content){width:calc(100% - 32px)}
 body #main :is(.category-cover,.resin-cover).photo-continuous-surface .breadcrumb{width:calc(100% - 32px)}
 body #main .photo-object--jar::before{filter:blur(3px)}
}
@media(prefers-reduced-motion:reduce){
 body #main :is(.photo-object,.photo-scene){animation:none;transition:none}
}