.jewelry-case{--case-ink:#342822;--case-paper:#faf8f4;--case-mute:#8b7a6d;--case-accent:#815044;--case-floor:#e9e1d5;--case-control:#faf8f4eb;--case-lift:0 1px 3px #3428222e;flex-direction:column;gap:10px;padding-block:14px 0;display:flex;container-type:inline-size}.jewelry-case__lede{justify-content:space-between;align-items:baseline;gap:12px;padding-inline:max(16px,50vw - 625px);display:flex}.jewelry-case__heading{text-wrap:balance;margin:0;font-size:clamp(1.6rem,5vw,2.4rem);line-height:1.1}.jewelry-case__count{letter-spacing:.12em;text-transform:uppercase;color:var(--case-mute);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.68rem}.jewelry-case__viewer{height:min(86svh, 1100px, calc(100cqw * var(--case-ratio,1.6) + 110px));touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;background-color:var(--case-floor);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .9' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .36  0 0 0 0 .26  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");min-height:360px;position:relative;overflow:hidden}html[data-z-design-mode="1"] .jewelry-case__viewer{height:min(calc(var(--editor-viewport-height,800px) * .86), calc(100cqw * var(--case-ratio,1.6) + 110px))}.jewelry-case__canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.jewelry-case__trays{position:absolute;inset:0;overflow:hidden}.jewelry-case__trays>.shopify-block{position:absolute;top:0;left:0}.jewelry-case__tray-area{width:100%;height:100%}.jewelry-case__pieces{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:0;padding:0;position:absolute;overflow:hidden}.jewelry-case__hint{left:50%;bottom:calc(66px + env(safe-area-inset-bottom,0px));z-index:2;color:var(--case-paper);white-space:nowrap;pointer-events:none;background:#342822c7;border-radius:40px;margin:0;padding:7px 14px;font-size:.75rem;transition:opacity .3s;position:absolute;translate:-50%}.jewelry-case__hint[data-visible=false]{opacity:0}.jewelry-case__filter{z-index:2;background:var(--case-control);box-shadow:var(--case-lift);border-radius:40px;padding:3px;display:flex;position:absolute;top:12px;right:12px}.jewelry-case__filter button{border-radius:40px;min-height:34px;padding-inline:12px;font-size:.75rem}.jewelry-case__filter button[aria-pressed=true]{background:var(--case-ink);color:var(--case-paper)}.jewelry-case__minimap{z-index:2;pointer-events:none;opacity:0;background:#faf8f4d9;border-radius:3px;width:54px;transition:opacity .25s;position:absolute;top:58px;right:12px;box-shadow:0 2px 8px #34282233}.jewelry-case__minimap[data-on=true]{opacity:1}.jewelry-case__minimap-tray{background:#dcc3b8;position:absolute}.jewelry-case__minimap-view{border:1.5px solid var(--case-accent);border-radius:1px;position:absolute}.jewelry-case__dock{z-index:2;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));pointer-events:none;background:linear-gradient(#0000,#e9e1d5e6 45%);align-items:center;gap:8px;display:flex;position:absolute;bottom:0;left:0;right:0}.jewelry-case__dock>*{pointer-events:auto}.jewelry-case__spacer{flex:1}.jewelry-case__chips{scrollbar-width:none;flex:1;gap:6px;min-width:0;padding-block:2px;display:flex;overflow:auto hidden}.jewelry-case__chips::-webkit-scrollbar{display:none}.jewelry-case__chip{background:var(--case-control);min-height:38px;box-shadow:var(--case-lift);border-radius:40px;flex:none;padding-inline:14px;font-size:.78rem}.jewelry-case__chip[aria-pressed=true]{background:var(--case-ink);color:var(--case-paper)}.jewelry-case__zoom{background:var(--case-control);box-shadow:var(--case-lift);border-radius:40px;flex:none;display:flex}.jewelry-case__zoom button{width:42px;height:38px;font-size:1.1rem;line-height:1}.jewelry-case__zoom button+button{border-left:1px solid #3428221f}.jewelry-case__viewer button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background-color:#0000;border:0}.jewelry-case__viewer .jewelry-case__chip,.jewelry-case__viewer .jewelry-case__zoom{background-color:var(--case-control)}.jewelry-case__viewer .jewelry-case__chip[aria-pressed=true],.jewelry-case__viewer .jewelry-case__filter button[aria-pressed=true]{background-color:var(--case-ink)}@media (prefers-reduced-motion:reduce){.jewelry-case__hint,.jewelry-case__minimap{transition:none}}
