/* Product photography proportions, using the portfolio's existing type and colors. */
.product-studio-section { padding: 24px var(--page-gutter) 88px; position: relative; z-index: 1; }
.product-studio-inner { max-width: 1312px; margin: auto; }
.product-studio-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 0 0 20px; }
.product-studio-heading h2 { font-size: clamp(22px, 2.4vw, 34px); font-weight: 400; letter-spacing: -.025em; }
.product-studio-heading p { color: var(--color-text-muted, #9a9ba0); font-size: 12px; margin: 0; }
.product-studio { --studio-accent: #d9b9a5; height: clamp(420px, 54vw, 660px); position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 50% 32%, #e9e8e6 0%, #d4d3d1 58%, #c2c1bf 100%); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-feature, 20px); }
.product-studio::before { content: ''; position: absolute; width: 62%; height: 9%; left: 19%; bottom: 12%; border-radius: 50%; background: #000; filter: blur(24px); opacity: .08; pointer-events: none; }
.product-studio[data-product-studio='wall-station'], .product-studio[data-product-studio='touchcolor'], .product-studio[data-product-studio='cmf-trash-can'] { background: radial-gradient(ellipse at 50% 35%, #f6ede1 0%, #e9dfd1 65%, #ddd2c2 100%); }
.product-studio .studio-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #14171b; opacity: 1; transition: opacity .75s ease; pointer-events: none; border: 0; border-radius: 0; }
.product-studio.is-ready .studio-poster { opacity: 0; }
.product-studio:not(.is-ready) .studio-status { color: #eee; background: rgba(14,17,22,.78); padding: 7px 11px; border-radius: 12px; }
.product-studio .studio-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; opacity: 0; transition: opacity .8s ease; }
.product-studio.is-ready .studio-canvas { opacity: 1; }
.product-studio.is-dragging .studio-canvas { cursor: grabbing; }
.studio-controls { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 4px; padding: 5px; background: rgba(9,12,16,.7); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); border-radius: 28px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .5s; }
.is-ready .studio-controls { opacity: 1; visibility: visible; pointer-events: auto; }
.studio-controls button { appearance: none; border: 0; color: #ecebea; font: inherit; font-size: 12px; background: transparent; border-radius: 24px; min-height: 40px; min-width: 40px; padding: 0 14px; cursor: pointer; }
.studio-controls button:hover { background: rgba(255,255,255,.12); }
.studio-controls button:focus-visible, .studio-canvas:focus-visible { outline: 2px solid var(--studio-accent); outline-offset: -3px; }
.studio-caption { position: absolute; left: 27px; top: 23px; color: #dbdcdf; font-size: 11px; letter-spacing: .08em; background: rgba(14,17,22,.62); border: 1px solid rgba(255,255,255,.09); padding: 7px 11px; border-radius: 20px; pointer-events: none; }
.studio-status { position: absolute; left: 27px; bottom: 35px; color: #55524e; font-size: 12px; margin: 0; pointer-events: none; max-width: 50%; }
@media (max-width: 700px) {
  .product-studio-section { padding: 12px 20px 48px; }
  .product-studio-heading { display: block; margin-bottom: 16px; }
  .product-studio-heading p { margin-top: 5px; }
  .product-studio { height: 460px; }
  .studio-caption { top: 16px; left: 16px; }
  .studio-status { left: 18px; right: 18px; bottom: 83px; max-width: none; font-size: 11px; text-align: center; }
  .studio-controls { bottom: 18px; left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; }
  .studio-controls button { min-height: 44px; padding: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .product-studio * { transition: none !important; } }