/* Furnace-reference art direction, shared by every cover and image card. */
:root{
 --art-left:8%;--art-right:4%;--art-top:4%;--art-bottom:6%;
 --studio-backdrop:url('/assets/studio/furnace-background-2026.webp')}
/* The same photographic wall/floor extends behind scenes and true cutouts.
   It is a separate layer so product labels and dark silhouettes stay intact. */
:is(.category-cover-stage,.resin-cover-stage,.directory-card-art,.catalog-art,
 .uae-collection-cover,.uae-new-art,.product-image,.category-cover-thumbnail,
 .uae-summary-cover,.uae-department-card):has(img[data-artwork]){
 position:relative;isolation:isolate;background-color:var(--graphite)}
:is(.category-cover-stage,.resin-cover-stage,.directory-card-art,.catalog-art,
 .uae-collection-cover,.uae-new-art,.product-image,.category-cover-thumbnail,
 .uae-summary-cover,.uae-department-card):has(img[data-artwork])::before{
 content:'';position:absolute;inset:0;z-index:-3;pointer-events:none;
 background:var(--studio-backdrop) center/cover no-repeat;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 94%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 8%,#000 96%,transparent),linear-gradient(180deg,transparent,#000 4%,#000 94%,transparent);
 mask-composite:intersect}
img[data-artwork="studio"]{
 background:transparent;border:0;border-radius:var(--r-tool);box-shadow:none;
 filter:none;opacity:1;mix-blend-mode:normal;
 --studio-x:linear-gradient(90deg,transparent 0%,#000 var(--art-left),#000 calc(100% - var(--art-right)),transparent 100%);
 --studio-y:linear-gradient(180deg,transparent 0%,#000 var(--art-top),#000 calc(100% - var(--art-bottom)),transparent 100%)}
/* Explicit selectors also replace the old per-image masks. */
.category-cover[data-category-cover] img[data-artwork="studio"],
.resin-cover img[data-artwork="studio"],
.uae-home .uae-summary-cover img[data-artwork="studio"],
.uae-department-card img[data-artwork="studio"],
.directory-card-art img[data-artwork="studio"],
.catalog-art img[data-artwork="studio"],
.uae-collection-cover img[data-artwork="studio"],
.uae-new-art img[data-artwork="studio"],
.category-cover-thumbnail img[data-artwork="studio"],
.product-image img[data-artwork="studio"]{
 -webkit-mask-image:var(--studio-x),var(--studio-y);
 -webkit-mask-composite:source-in;
 mask-image:var(--studio-x),var(--studio-y);
 mask-composite:intersect}
/* Give each composition a box with its own aspect ratio. A mask on an
   object-fit letterbox would leave the real photograph edges visible. */
.directory-card-art:has(img[data-artwork]),
.catalog-art:has(img[data-artwork]),
.uae-collection-cover:has(img[data-artwork]),
.uae-new-art:has(img[data-artwork]),
.category-cover-thumbnail:has(img[data-artwork]),
.product-image:has(img[data-artwork]),
.uae-home .uae-summary-cover{
 container-type:size;display:flex;align-items:center;justify-content:center;
 background:var(--graphite);border:0;box-shadow:none}
.directory-card-art img[data-artwork],
.catalog-art img[data-artwork],
.uae-collection-cover img[data-artwork],
.uae-new-art img[data-artwork],
.category-cover-thumbnail img[data-artwork],
.product-image img[data-artwork],
.uae-home .uae-summary-cover img[data-artwork]{
 position:static;inset:auto;flex:none;display:block;
 width:auto;height:auto;max-width:100%;max-height:100%;
 aspect-ratio:var(--art-ratio);object-fit:contain;object-position:center;
 padding:0;margin:0;transform:none}
@supports(width:1cqw){
 .directory-card-art img[data-artwork],
 .catalog-art img[data-artwork],
 .uae-collection-cover img[data-artwork],
 .uae-new-art img[data-artwork],
 .category-cover-thumbnail img[data-artwork],
 .product-image img[data-artwork],
 .uae-home .uae-summary-cover img[data-artwork]{
  width:min(100cqw,calc(100cqh * var(--art-ratio)));
  height:auto;max-width:none;max-height:none}}
.uae-home .uae-summary-cover::after{display:none}
.product-card:hover .product-image img[data-artwork]{transform:none}

/* Keep department products complete even when the text increases card height. */
.uae-department-card{background:var(--graphite)}
.uae-department-card img[data-artwork]{
 --art-left:4%;--art-right:4%;--art-bottom:4%;
 inset:auto 0 0;width:100%;height:auto;object-fit:contain}

/* True cutouts stay fully opaque on the same surface as their card. */
.directory-card-isolated,.uae-new-art{background:transparent}
.directory-card-isolated img,
.product-image img.product-photo,
.category-cover-isolated .category-cover-image,
.category-cover-thumbnail-isolated img{
 border:0;box-shadow:none;filter:none;opacity:1;
 -webkit-mask-image:none;mask-image:none;mix-blend-mode:normal}
.product-image img.photo-matte{mix-blend-mode:multiply}

/* Isolated model cards use the very same studio, with breathing room. */
.directory-card-art:has(img[data-artwork="cutout"]),
.product-image:has(img[data-artwork="cutout"]){background:var(--graphite)}
.directory-card-art img[data-artwork="cutout"],
.product-image img[data-artwork="cutout"]{
 width:auto;height:auto;max-width:88%;max-height:84%;padding:0}
@supports(width:1cqw){
 .directory-card-art img[data-artwork="cutout"],
 .product-image img[data-artwork="cutout"]{
  width:min(88cqw,calc(84cqh * var(--art-ratio)));height:auto;
  max-width:none;max-height:none}}
.product-image .rotary-set{display:flex;align-items:center;justify-content:center;width:100%;height:100%;gap:4%}
.product-image .rotary-set img[data-artwork]{width:25%;height:82%;max-width:25%;max-height:82%;object-fit:contain;padding:0}

/* A photograph and its caption share one surface, without a panel outline
   or a light/dark seam between image and text. Keyboard focus stays visible. */
.directory-card:has(img),.catalog-tile:has(img),.product-card:has(img),
.uae-home .uae-summary-card,.uae-home-jumps>a.uae-department-card,
.uae-collection-links>a:has(img){border:0;box-shadow:none}
.directory-card:has(img):hover,.catalog-tile:has(img):hover,
.uae-home-jumps>a.uae-department-card:hover{border:0;box-shadow:none}
.category-cover.material-heading{border-bottom:0}
.uae-home .uae-summary-links li{border-top:0}
.directory-card:has(img[data-artwork]),
.catalog-tile:has(img[data-artwork]),
.product-card:has(img[data-artwork]),
.uae-collection-links>a:has(img[data-artwork]){
 background:var(--graphite);color:#fff}
.directory-card:has(img[data-artwork]) .directory-card-copy h3,
.catalog-tile:has(img[data-artwork]) .catalog-tile-copy,
.product-card:has(img[data-artwork]) .product-card-info h3{color:#fff}
.directory-card:has(img[data-artwork]) .directory-card-copy p,
.catalog-tile:has(img[data-artwork]) .catalog-tile-copy p,
.product-card:has(img[data-artwork]) .product-card-info :is(p,.sub){color:#d3d7dc}
.product-card:has(img[data-artwork]) .product-card-info{padding:20px 22px;border:0}
.product-card:has(img) .product-card-info,
.catalog-tile:has(img[data-artwork]) .catalog-tile-foot{border:0}

/* True alpha artwork has no rectangular raster backdrop to feather. */
.category-cover[data-category-cover] img[data-artwork="cutout"],
.directory-card-art img[data-artwork="cutout"],
.catalog-art img[data-artwork="cutout"],
.category-cover-thumbnail img[data-artwork="cutout"],
.product-image img[data-artwork="cutout"]{
 -webkit-mask-image:none;mask-image:none;
 background:transparent;mix-blend-mode:normal;opacity:1}

@media(min-width:701px){
 /* Powder fringes begin before the jars; reserve a clear live-text field. */
 .category-cover:is([data-category-cover="pfm-ceramic"],[data-category-cover="pfm-opaque"],[data-category-cover="zrlisi-ceramic"]) .category-cover-content{width:33%}}

@media(max-width:700px){
 .category-cover-stage:has(img[data-artwork])::before,
 .resin-cover-stage:has(img[data-artwork])::before{
  bottom:auto;aspect-ratio:var(--cover-art-ratio,2.50063052)}
 /* No blanket 160% zoom: complete products, including lamps and washers,
    sit above the text in both languages. */
 .category-cover .category-cover-image[data-artwork],
 .resin-cover .resin-cover-image[data-artwork]{
  position:relative;inset:auto;top:auto;left:auto;align-self:center;
  width:100%;max-width:100%;height:auto;max-height:none;
  transform:none;object-fit:contain;object-position:center}}

/* Card photographs fill their panel: one studio, no inset photograph frame.
   Page heroes keep their separate wide composition and edge treatment. */
.uae-home .uae-summary-cover:has(img[data-artwork="studio"])::before,
.directory-card-art:has(img[data-artwork="studio"])::before,
.catalog-art:has(img[data-artwork="studio"])::before,
.uae-collection-cover:has(img[data-artwork="studio"])::before,
.uae-new-art:has(img[data-artwork="studio"])::before,
.category-cover-thumbnail:has(img[data-artwork="studio"])::before,
.product-image:has(img[data-artwork="studio"])::before{display:none}

.uae-home .uae-summary-cover img[data-artwork="studio"],
.directory-card-art img[data-artwork="studio"],
.catalog-art img[data-artwork="studio"],
.uae-collection-cover img[data-artwork="studio"],
.uae-new-art img[data-artwork="studio"],
.category-cover-thumbnail img[data-artwork="studio"],
.product-image img[data-artwork="studio"]{
 position:absolute;inset:0;display:block;
 width:100%;height:100%;max-width:none;max-height:none;
 aspect-ratio:auto;object-fit:cover;object-position:var(--card-focus,100% 50%);
 padding:0;margin:0;transform:none;border-radius:var(--r-card);
 -webkit-mask-image:none;mask-image:none}
.uae-home .uae-summary-cover img[src$="/printing-system-printer-foreground.webp"][data-artwork]{--card-focus:90% 50%}
.uae-home .uae-summary-cover img[src$="/furnaces-spaced.webp"][data-artwork],
.uae-home .uae-summary-cover img[src$="/workbench-lumera-upright.webp"][data-artwork],
.uae-home .uae-summary-cover img[src$="/accessories-card-fullbleed-2026.webp"][data-artwork]{--card-focus:50% 50%}
.directory-card-art img[data-artwork="studio"],
.catalog-art img[data-artwork="studio"],
.category-cover-thumbnail img[data-artwork="studio"]{--card-focus:50% 50%}

.product-image:has(img[data-artwork="studio"]),
.uae-collection-cover:has(img[data-artwork="studio"]),
.uae-new-art:has(img[data-artwork="studio"]){height:auto;aspect-ratio:8/5}
.catalog-art:has(img[data-artwork="studio"]),
.category-cover-thumbnail:has(img[data-artwork="studio"]){height:auto;aspect-ratio:2.4/1}

/* The photo reaches the outer rounded card edge. Only its floor blends into
   the caption; there is no top/side feather or second scene behind it. */
.uae-home .uae-summary-cover,
:is(.directory-card-art,.catalog-art,.uae-collection-cover,.uae-new-art,
 .category-cover-thumbnail,.product-image):has(img[data-artwork]){overflow:hidden}
.uae-home .uae-summary-cover::after,
:is(.directory-card-art,.catalog-art,.uae-collection-cover,.uae-new-art,
 .category-cover-thumbnail,.product-image):has(img[data-artwork])::after{
 content:'';display:block;position:absolute;inset:auto 0 0;
 width:100%;height:12%;z-index:1;pointer-events:none;
 background:transparent}
:is(.directory-card-art,.catalog-art,.uae-collection-cover,.uae-new-art,
 .category-cover-thumbnail,.product-image):has(img[data-artwork="cutout"])::before{
 -webkit-mask-image:none;mask-image:none}

/* Shared, restrained motion for every interactive card family. Transforms
   do not reflow neighbours; image scaling keeps the full-bleed card treatment. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :is(.uae-home-jumps>a.uae-department-card,.uae-summary-card,.directory-card,
  .product-card,.resource-card,.material-card,.material-mini,.shade-card,
  .detail-aside-card,.catalog-tile,.system-tile,.material-type-card,
  .uae-collection-links>a){
  transition:translate 280ms cubic-bezier(.2,.65,.3,1),box-shadow 280ms ease,border-color 280ms ease}
 :is(.uae-home-jumps>a.uae-department-card,.uae-summary-card,.directory-card,
  .product-card,.resource-card,.material-card,.material-mini,.shade-card,
  .detail-aside-card,.catalog-tile,.system-tile,.material-type-card,
  .uae-collection-links>a):is(:hover,:focus-visible,:has(:focus-visible)){
  translate:0 -4px;transform:none;z-index:1;
  box-shadow:none}
 :is(.uae-home-jumps>a.uae-department-card,.uae-summary-card,.directory-card,
  .product-card,.catalog-tile,.uae-collection-links>a) img[data-artwork]{
  transition:scale 420ms cubic-bezier(.2,.65,.3,1);
  transform-origin:center}
 :is(.uae-home-jumps>a.uae-department-card,.uae-summary-card,.directory-card,
  .product-card,.catalog-tile,.uae-collection-links>a):is(:hover,:focus-visible,:has(:focus-visible)) img[data-artwork]{
  scale:1.025;transform:none}
 .product-card:hover .product-image.optimax img.product-photo{transform:none;scale:1.025}}

/* Touch interaction has no sticky hover jump. Reduced-motion users retain
   the existing focus outlines and colour cues without displacement or zoom. */
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){
 :is(.uae-home-jumps>a.uae-department-card,.uae-summary-card,.directory-card,
  .product-card,.resource-card,.material-card,.material-mini,.shade-card,
  .detail-aside-card,.catalog-tile,.system-tile,.material-type-card,
  .uae-collection-links>a):is(:hover,:focus-visible,:has(:focus-visible)){
  translate:none;transform:none}
 :is(.uae-home-jumps>a.uae-department-card,.uae-summary-card,.directory-card,
  .product-card,.catalog-tile,.uae-collection-links>a):is(:hover,:focus-visible,:has(:focus-visible)) img[data-artwork],
 .product-card:hover .product-image.optimax img.product-photo{
  scale:none;transform:none}}
/* Approved transparent jar photography, beside the corresponding material. */
.packaging-art{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;direction:ltr}
.packaging-art .packaging-jar{display:block;position:static;min-width:0;width:100%;height:100%;object-fit:contain;object-position:center;background:transparent;border:0;border-radius:var(--r-tool);box-shadow:none;filter:none;mix-blend-mode:normal;opacity:1;transform:none;-webkit-mask-image:none;mask-image:none}
.packaging-art-2 .packaging-jar{width:calc(50% - 4px)}
.packaging-art-3 .packaging-jar{width:calc(33.333% - 6px)}
.product-image:has(.packaging-jar),.detail-visual:has(.packaging-jar){background:var(--graphite) var(--studio-backdrop) center/cover no-repeat}
.product-image>.packaging-art{width:100%;height:100%;padding:18px}
.detail-visual>.packaging-art{width:100%;height:380px;padding:26px}
.product-image .packaging-art .packaging-jar,.detail-visual .packaging-art .packaging-jar{height:100%;max-width:100%;object-fit:contain}
.packaging-stage{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:center;direction:ltr;padding:32px 40px;border-radius:var(--r-card);background:transparent}
.packaging-stage::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--studio-backdrop) center/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 92%,transparent);mask-composite:intersect}
.packaging-stage .packaging-art{height:330px}
.packaging-stage .packaging-art-1 .packaging-jar{max-width:370px}
.packaging-copy{min-width:0;overflow-wrap:anywhere;text-align:start}
.packaging-copy h1{color:#fff;font-size:clamp(32px,4.4vw,56px);line-height:1.25;letter-spacing:0}
html[lang=ar] .packaging-copy h1{line-height:1.5;letter-spacing:0}
.packaging-copy .eyebrow{color:#dce0e4;font-size:12px;line-height:1.8;margin-bottom:18px}
.packaging-copy .lead{font-size:17px;line-height:1.85;color:#e2e5e8;margin-top:20px}
.packaging-copy .packaging-caption{color:#c2c8ce;font-size:12px;line-height:1.8;margin-top:18px}
:is(.material-card,.material-mini,.shade-card).has-packaging{color:#fff;background:var(--graphite) var(--studio-backdrop) center/cover no-repeat;overflow:hidden}
.material-card.has-packaging{gap:12px}
.material-card.has-packaging>.packaging-art{height:160px;margin:-8px 0 0}
.material-card.has-packaging h3,.shade-card.has-packaging strong{color:#fff}
.material-card.has-packaging .material-card-top>span,.material-card.has-packaging .material-card-foot,.material-mini.has-packaging .mini-en,.shade-card.has-packaging small,.shade-card.has-packaging .shade-packs,.shade-card.has-packaging .shade-go{color:#d2d7dc}
.material-card.has-packaging .material-card-foot,.shade-card.has-packaging .shade-go{border-color:#ffffff26}
.material-card.has-packaging .shade-preview span,.material-mini.has-packaging .mini-count{color:#e8ebed;background:#ffffff0d;border-color:#ffffff26}
.material-mini.has-packaging{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"p p" "n c" "e c";gap:4px 9px}
.material-mini.has-packaging:not(:has(.mini-en)){grid-template-areas:"p p" "n c"}
.material-mini.has-packaging>.packaging-art{grid-area:p;height:126px}
.material-mini.has-packaging .mini-name{overflow-wrap:anywhere}
.shade-card.has-packaging>.packaging-art{height:126px;margin:-5px -2px 2px}
.shade-card.has-packaging .packaging-note{display:block;font-size:12px;line-height:1.5;color:#bac2c9;text-align:start}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :is(.material-card,.material-mini,.shade-card).has-packaging .packaging-jar{transition:scale .28s ease}
 :is(.material-card,.material-mini,.shade-card).has-packaging:is(:hover,:focus-visible) .packaging-jar{scale:1.035}}
@media(max-width:1000px){
 .packaging-stage{padding:28px;gap:24px}
 .packaging-stage .packaging-art{height:280px}}
@media(max-width:700px){
 .packaging-stage{grid-template-columns:1fr;gap:10px;padding:20px}
 .packaging-stage>.packaging-art{grid-row:1;height:230px}
 .packaging-stage .packaging-art-1 .packaging-jar{max-width:250px}
 .packaging-copy h1{font-size:clamp(32px,4.4vw,56px)}
 .packaging-copy .eyebrow{margin-bottom:10px;font-size:12px}
 .packaging-copy .lead{font-size:14px;margin-top:14px}
 .packaging-copy .packaging-caption{font-size:12px;margin-top:12px}
 .material-card.has-packaging>.packaging-art{height:125px}
 .material-mini.has-packaging{grid-template-columns:1fr auto;grid-template-areas:"p p" "n c" "e c"}
 .material-mini.has-packaging:not(:has(.mini-en)){grid-template-areas:"p p" "n c"}
 .material-mini.has-packaging>.packaging-art{height:100px}
 .shade-grid:has(.has-packaging){grid-template-columns:repeat(2,minmax(0,1fr))}
 .shade-card.has-packaging>.packaging-art{height:138px}}