/* The architecture and the word occupy distinct planes; the two photo copies stay aligned. */
.pj .pj-depth { --pjd-camera:translate3d(0,0,0) scale(1); --pjd-type-y:0px; --pjd-type-x:0px; --pjd-type-opacity:1; }
.pj .pj-depth .pj-depth-photo,.pj .pj-depth .pj-depth-foreground { position:absolute; inset:0; width:100%; height:100%; max-height:none; margin:0; overflow:visible; border-radius:0; transform:var(--pjd-camera); transform-origin:50% 50%; pointer-events:none; }
.pj .pj-depth .pj-depth-photo { z-index:0; background:transparent; }
.pj .pj-depth .pj-depth-foreground { z-index:3; display:none; }
.pj .pj-depth[data-pjd-ready="true"] .pj-depth-foreground { display:block; }
.pj .pj-depth .pj-depth-plane { position:absolute; inset:0; }
.pj .pj-depth[data-pjd-ready="true"] .pj-depth-plane { inset:auto; left:var(--pjd-photo-x); top:var(--pjd-photo-y); width:var(--pjd-photo-width); height:var(--pjd-photo-height); }
.pj .pj-depth .pj-hero-image { display:block; width:100%; height:100%; max-height:none; object-fit:cover; object-position:var(--pj-hero-position); transform:none !important; -webkit-user-drag:none; user-select:none; }
.pj .pj-depth[data-pjd-ready="true"] .pj-hero-image { object-fit:fill; }
.pj .pj-depth .pj-depth-plane > svg { display:block; width:100%; height:100%; overflow:visible; }
.pj .pj-depth #detailTitle { z-index:2; top:52%; bottom:auto; left:50%; width:max-content; max-width:none; font-size:clamp(120px,var(--pjd-word-size),470px); font-weight:400; line-height:.81; letter-spacing:-.075em; color:#f3ecdc; white-space:nowrap; transform:translate3d(calc(-50% + var(--pjd-type-x)),calc(-50% + var(--pjd-type-y)),0); opacity:var(--pjd-type-opacity); text-shadow:0 2px 28px #0d191018; pointer-events:none; }
.pj .pj-depth[data-pjd-product="velox"] #detailTitle { top:55%; }
.pj .pj-depth .pj-depth-shade { z-index:4; background:linear-gradient(180deg,rgba(9,17,15,.24),transparent 27%,transparent 64%,rgba(9,17,15,.2) 80%,rgba(9,17,15,.64)); }
.pj .pj-depth .pj-hero-category { z-index:5; display:flex; align-items:center; gap:20px; }
.pj .pj-depth .pj-hero-category > span:first-child { letter-spacing:.14em; }
.pj .pj-depth .pj-hero-category > span+span { padding-left:20px; border-left:1px solid #f3ecdc6b; }
.pj .pj-depth .pj-hero-bottom { z-index:5; }
.pj .pj-depth[data-pjd-error="true"] { background:linear-gradient(145deg,#41473a,#18251f); }
.pj .pj-depth[data-pjd-error="true"] .pj-depth-photo { display:none; }
@media (max-width:700px) {
  .pj .pj-depth #detailTitle { top:52%; font-size:var(--pjd-word-size); letter-spacing:-.072em; }
  .pj .pj-depth[data-pjd-product="velox"] #detailTitle { top:60%; }
  .pj .pj-depth[data-pjd-product="textura"] #detailTitle { top:56%; }
  .pj .pj-depth .pj-hero-image { object-position:var(--pj-mobile-position); }
  .pj .pj-depth .pj-hero-category { align-items:start; gap:10px; }
  .pj .pj-depth .pj-hero-category > span+span { padding-left:10px; max-width:190px; }
  .pj .pj-depth .pj-hero-bottom { display:flex; align-items:end; gap:16px; }
  .pj .pj-depth .pj-hero-bottom > span { max-width:92px; line-height:1.6; font-size:8px; }
  .pj .pj-depth .pj-hero-bottom button { gap:16px; text-align:left; font-size:10px; }
}
@media (prefers-reduced-motion:reduce) {
  .pj .pj-depth .pj-depth-photo,.pj .pj-depth .pj-depth-foreground { transform:none; }
  .pj .pj-depth #detailTitle { transform:translate3d(-50%,-50%,0); opacity:1; }
}
.pj[data-motion="off"] .pj-depth .pj-depth-photo,.pj[data-motion="off"] .pj-depth .pj-depth-foreground { transform:none; }
.pj[data-motion="off"] .pj-depth #detailTitle { transform:translate3d(-50%,-50%,0); opacity:1; }