/* DALANG Signature Collection: interactive garment showroom. */
.motion-edit{scroll-margin-top:110px;color:#24483b}
.motion-edit .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.motion-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:26px}
.motion-heading h2{max-width:19ch!important;margin:0!important;font-size:clamp(34px,3.6vw,48px)!important;line-height:1.08!important}
.motion-heading>p{max-width:45ch;margin:0;color:#536158;font-size:14px;line-height:1.7}
.motion-section-links{display:flex;flex-wrap:wrap;gap:24px;padding:15px 0;border-block:1px solid #d4dbd3;margin-bottom:0}
.motion-section-links a{font-size:12px;text-decoration:none;min-height:28px;display:inline-flex;align-items:center}
.motion-section-links a:hover{text-decoration:underline}
.motion-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;min-height:452px;border-bottom:1px solid #d4dbd3;background:#efeee7}
.motion-scene{position:relative;min-width:0;overflow:hidden;isolation:isolate;touch-action:pan-y;min-height:452px}
.motion-stage{position:absolute;inset:22px 0 58px}
.motion-item{position:absolute;left:50%;top:50%;width:265px;height:340px;transform:translate(calc(-50% + var(--shift)), -50%) scale(var(--scale));opacity:var(--opacity);filter:blur(var(--blur));z-index:var(--layer);transition:transform 760ms cubic-bezier(.16,1,.3,1),opacity 540ms ease,filter 700ms ease;pointer-events:var(--pointer);border:0;padding:0;background:none;cursor:pointer;color:inherit}
.motion-item img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;pointer-events:none;user-select:none;-webkit-user-drag:none;background:transparent}
/* These transforms position the garments; shared button hover/active rules must not replace them. */
.motion-edit .motion-stage .motion-item{transform:translate(calc(-50% + var(--shift)), -50%) scale(var(--scale))!important;box-shadow:none!important;background:transparent!important}
.motion-item:after{content:'';position:absolute;left:25%;right:25%;height:9px;bottom:-12px;background:#17362c;opacity:.12;filter:blur(9px);z-index:-1;border-radius:50%}
.motion-item:focus-visible{outline:2px solid #24483b;outline-offset:9px}
.motion-center-label{position:absolute;bottom:11px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.035em;color:#536158;pointer-events:none}
.motion-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;position:absolute;bottom:16px;left:26px;right:26px}
.motion-control-group{display:flex;gap:8px;align-items:center}
.motion-arrow,.motion-focus,.motion-back,.motion-hotspot{display:inline-flex;align-items:center;justify-content:center;min-height:44px;cursor:pointer;font:500 12px/1.3 var(--sans);color:#24483b;background:transparent;border:1px solid #b5bfb3}
.motion-arrow{width:44px;border-radius:50%}
.motion-arrow svg{width:18px;height:18px}
.motion-arrow:hover,.motion-focus:hover,.motion-back:hover{background:#24483b;color:white;border-color:#24483b}
.motion-counter{font-size:12px;font-variant-numeric:tabular-nums;margin-right:10px;min-width:46px}
.motion-dots{display:flex;gap:7px;align-items:center}
.motion-dot{height:28px;width:26px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.motion-dot:after{content:'';display:block;height:3px;width:22px;background:#b5bfb3;transition:background .2s}
.motion-dot[aria-pressed=true]:after{background:#24483b}
.motion-info{padding:28px 24px 24px;border-left:1px solid #d4dbd3;display:flex;flex-direction:column;justify-content:center;background:#f7f6f2;min-width:0}
.motion-code{display:block;color:#536158;font-size:11px;letter-spacing:.045em;margin-bottom:12px}
.motion-info h3{font-size:29px!important;line-height:1.12!important;margin:0 0 18px!important;color:#24483b;min-height:65px}
.motion-features{margin:0 0 24px;padding:0;list-style:none;border-top:1px solid #d4dbd3}
.motion-features li{padding:8px 0;border-bottom:1px solid #d4dbd3;color:#536158;font-size:12px}
.motion-info .btn{width:100%;min-height:46px;font-size:11px;padding:12px 14px;letter-spacing:.035em;text-decoration:none;background:#24483b;color:#fff;border:1px solid #24483b}
.motion-info .btn:hover{background:#17362c}
.motion-info .motion-secondary{margin-top:10px;text-align:center;font-size:11px;min-height:32px;padding-top:5px}
.motion-secondary-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
.motion-secondary-links a{display:inline-flex;align-items:center;min-height:36px;font-size:12px;text-underline-offset:3px}
.motion-inquiry{cursor:pointer}
.interactive-static-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.interactive-static-grid img{width:100%;height:280px;object-fit:contain}
.interactive-static-grid h3{font-size:23px}
@media(max-width:760px){.interactive-static-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.interactive-static-grid img{height:230px}}
.motion-note{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:13px 0 0;color:#536158;font-size:11px}
.motion-note a{font-size:12px;color:#24483b}
.motion-note p{margin:0;font-size:11px}
.motion-focus{gap:9px;padding:10px 14px;margin-right:auto}
.motion-focus svg,.motion-back svg{width:15px;height:15px}
.motion-full .motion-layout{grid-template-columns:minmax(0,1fr) 330px;min-height:530px}
.motion-full{padding-block:48px!important}
.motion-full .motion-scene{min-height:530px}
.motion-full .motion-item{width:285px;height:370px}
.motion-full .motion-stage{inset:32px 0 70px}
.motion-full .motion-info{padding:30px}
.motion-full .motion-info h3{font-size:34px!important}
.motion-full .motion-scene.is-focused .motion-item:not([aria-current=true]){opacity:0;filter:blur(5px);pointer-events:none;transform:translate(calc(-50% + var(--shift)), -50%) scale(.65)!important}
.motion-full .motion-scene.is-focused .motion-item[aria-current=true]{transform:translate(-50%,-50%) scale(1.08)!important}
.motion-back{position:absolute;top:18px;left:22px;z-index:12;gap:8px;padding:8px 12px;background:#efeee7}
.motion-hotspots{position:absolute;width:285px;height:370px;left:50%;top:50%;transform:translate(-50%,-50%) scale(1.08);pointer-events:none;z-index:10}
.motion-hotspot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:44px;height:44px;min-height:44px;border:0;background:none;pointer-events:auto}
.motion-edit .motion-stage .motion-hotspot{transform:translate(-50%,-50%)!important;box-shadow:none!important;background:transparent!important}
.motion-hotspot:before{content:'';width:18px;height:18px;border-radius:50%;background:#f7f6f2;border:1px solid #24483b;box-shadow:0 3px 8px #17362c35;transition:transform .2s}
.motion-hotspot:after{content:'+';position:absolute;font-size:15px;line-height:1;color:#24483b;top:50%;left:50%;transform:translate(-50%,-52%)}
.motion-hotspot:hover:before,.motion-hotspot[aria-pressed=true]:before{transform:scale(1.35);background:#24483b}
.motion-hotspot[aria-pressed=true]:after,.motion-hotspot:hover:after{color:white}
.motion-hotspot-label{display:none;position:absolute;left:36px;top:10px;white-space:nowrap;padding:4px 8px;background:#24483b;color:#fff;font-size:11px;line-height:1.5}
.motion-hotspot[aria-pressed=true] .motion-hotspot-label,.motion-hotspot:hover .motion-hotspot-label{display:block}
.motion-detail{margin:0 0 18px;border-top:1px solid #d4dbd3;padding-top:12px}
.motion-detail strong{font-size:13px;font-weight:650}
.motion-detail p{font-size:12px;line-height:1.7;margin:6px 0 0;color:#536158}
.motion-info .motion-thumbs{display:flex;gap:8px;margin:18px 0 0}
.motion-thumb{display:grid;place-items:center;background:#efeee7;border:1px solid transparent;width:48px;height:57px;padding:5px;cursor:pointer}
.motion-thumb img{width:100%;height:100%;object-fit:contain;background:none}
.motion-thumb[aria-pressed=true]{border-color:#24483b}
.motion-full .motion-features{margin-bottom:18px}
.motion-full .motion-features button{display:block;min-height:37px;padding:6px 0;border:0;background:none;color:#536158;font-size:12px;text-align:left;width:100%;cursor:pointer}
.motion-full .motion-features li{padding:0}
.motion-full .motion-features button[aria-pressed=true]{color:#24483b;font-weight:700}
.motion-preview-location{margin:24px 0 0;padding-top:15px;border-top:1px solid #d4dbd3;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#536158}
.motion-preview-location a{color:#24483b}
.motion-edit button:focus-visible,.motion-edit a:focus-visible{outline:2px solid #24483b;outline-offset:4px}
.motion-edit ::selection{background:#24483b;color:#fff}
@media(min-width:1600px){.motion-layout{grid-template-columns:minmax(0,1fr) 320px}.motion-item{width:300px;height:360px}}
@media(max-width:1050px){.motion-layout{grid-template-columns:minmax(0,1fr) 255px}.motion-item{width:235px;height:300px}.motion-full .motion-layout{grid-template-columns:minmax(0,1fr) 285px}.motion-full .motion-item,.motion-hotspots{width:255px;height:340px}.motion-info{padding:22px 18px}.motion-heading{gap:24px}.motion-heading>p{max-width:35ch}}
@media(max-width:760px){.motion-heading{display:block;margin-bottom:20px}.motion-heading h2{font-size:34px!important;max-width:22ch!important}.motion-heading>p{max-width:55ch;margin-top:15px;font-size:13px}.motion-section-links{gap:8px 19px;padding:11px 0}.motion-section-links a{font-size:11px}.motion-layout,.motion-full .motion-layout{grid-template-columns:1fr}.motion-scene{min-height:365px}.motion-stage{inset:20px 0 58px}.motion-item{width:220px;height:278px}.motion-info{padding:24px;border-left:0;border-top:1px solid #d4dbd3}.motion-info h3{min-height:0;font-size:28px!important;margin-bottom:16px!important;max-width:24ch}.motion-code{margin-bottom:8px}.motion-features{margin-bottom:18px}.motion-controls{left:18px;right:18px}.motion-note{align-items:flex-start;flex-direction:column;gap:5px}.motion-full .motion-scene{min-height:430px}.motion-full .motion-item,.motion-hotspots{width:235px;height:305px}.motion-full .motion-info{padding:24px}.motion-full .motion-info h3{font-size:30px!important}.motion-full .motion-stage{inset:26px 0 68px}.motion-center-label{font-size:11px;bottom:8px}.motion-preview-location{flex-direction:column;gap:6px}.motion-info .motion-thumbs{margin-top:16px}.motion-focus{font-size:11px;padding:10px}.motion-counter{margin-right:0}.motion-full .motion-dots{display:none}.motion-full .motion-control-group{gap:5px}}
@media(prefers-reduced-motion:reduce){.motion-item,.motion-dot:after,.motion-hotspot:before{transition:none}.motion-edit{scroll-behavior:auto}}

/* Text rows in the development-reference panel align with the signature features. */
#new-design-references-home .motion-feature-label {
  display: flex;
  align-items: center;
  min-height: 37px;
  padding-block: 6px;
}