@property --art-w{syntax: "<number>"; inherits: true; initial-value: 500;}@property --art-h{syntax: "<number>"; inherits: true; initial-value: 700;}@property --profile-mm{syntax: "<number>"; inherits: true; initial-value: 20;}@property --mat-mm{syntax: "<number>"; inherits: true; initial-value: 0;}@property --fr-base{syntax: "<color>"; inherits: true; initial-value: #c4a275;}@property --fr-light{syntax: "<color>"; inherits: true; initial-value: #dcc095;}@property --fr-dark{syntax: "<color>"; inherits: true; initial-value: #a2804f;}@property --fr-grain{syntax: "<number>"; inherits: true; initial-value: 1;}[data-frame=black],[data-hd-swatch=black]{--fr-base: #262523;--fr-light: #353330;--fr-dark: #1a1918;--fr-grain: .12}[data-frame=white],[data-hd-swatch=white]{--fr-base: #f1eee8;--fr-light: #fbfaf7;--fr-dark: #e0dbd2;--fr-grain: .05}[data-frame=oak],[data-hd-swatch=oak]{--fr-base: #c7a577;--fr-light: #d6b98a;--fr-dark: #ae8b5b;--fr-grain: 1}[data-frame=walnut],[data-hd-swatch=walnut]{--fr-base: #6a4a31;--fr-light: #7b573a;--fr-dark: #523826;--fr-grain: 1}.hd-frame{--total-w: calc(var(--art-w) + 2 * (var(--profile-mm) + var(--mat-mm)));--total-h: calc(var(--art-h) + 2 * (var(--profile-mm) + var(--mat-mm)));container-type:inline-size;position:relative;isolation:isolate;margin:0;aspect-ratio:var(--total-w) / var(--total-h);box-shadow:var(--shadow-frame);transition:--art-w var(--dur-gentle, .52s) var(--ease-in-out, ease),--art-h var(--dur-gentle, .52s) var(--ease-in-out, ease),--profile-mm var(--dur-base, .32s) var(--ease-in-out, ease),--mat-mm var(--dur-base, .32s) var(--ease-in-out, ease),--fr-base var(--dur-base, .32s) var(--ease-in-out, ease),--fr-light var(--dur-base, .32s) var(--ease-in-out, ease),--fr-dark var(--dur-base, .32s) var(--ease-in-out, ease),--fr-grain var(--dur-base, .32s) var(--ease-in-out, ease)}.hd-frame__moulding{--mm: calc(100cqi / var(--total-w));--pf: calc(var(--profile-mm) * var(--mm));position:relative;height:100%;padding:var(--pf);background:repeating-linear-gradient(90deg,rgb(60 38 18 / calc(.08 * var(--fr-grain))) 0 1px,transparent 1px 3px,rgb(60 38 18 / calc(.05 * var(--fr-grain))) 3px 4px,transparent 4px 11px),repeating-linear-gradient(90deg,transparent 0 5px,rgb(255 240 215 / calc(.1 * var(--fr-grain))) 5px 6px,transparent 6px 17px),linear-gradient(90deg,var(--fr-light),var(--fr-base) 45%,var(--fr-dark));box-shadow:inset 0 0 0 1px #0000001a}.hd-frame__moulding:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgb(60 38 18 / calc(.08 * var(--fr-grain))) 0 1px,transparent 1px 3px,rgb(60 38 18 / calc(.05 * var(--fr-grain))) 3px 4px,transparent 4px 11px),repeating-linear-gradient(0deg,transparent 0 5px,rgb(255 240 215 / calc(.1 * var(--fr-grain))) 5px 6px,transparent 6px 17px),linear-gradient(180deg,var(--fr-light),var(--fr-base) 45%,var(--fr-dark));clip-path:polygon(0 0,100% 0,calc(100% - var(--pf)) var(--pf),calc(100% - var(--pf)) calc(100% - var(--pf)),100% 100%,0 100%,var(--pf) calc(100% - var(--pf)),var(--pf) var(--pf))}.hd-frame__mat{position:relative;z-index:1;height:100%;padding:calc(var(--mat-mm) * var(--mm));background:#fbfaf7;box-shadow:inset 0 2px 3px #00000038,inset 2px 0 3px #0000001a}.hd-frame__art{display:block;width:100%;height:100%;object-fit:contain;background:#fff}.hd-frame__glass{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgb(255 255 255 / .13) 44%,rgb(255 255 255 / .04) 52%,transparent 60%);mix-blend-mode:screen}.hd-frame[data-frame=none]{box-shadow:var(--shadow-md)}.hd-frame[data-frame=none] .hd-frame__mat{box-shadow:inset 0 0 0 1px #0000000d}.hd-frame-stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;place-items:center;container-type:size;background:radial-gradient(120% 90% at 22% 12%,rgb(255 251 242 / .85),transparent 60%),linear-gradient(180deg,rgb(var(--color-parchment-light)),rgb(var(--color-parchment)) 78%,#ebe5da);opacity:0;visibility:hidden;transition:opacity var(--dur-base, .32s) var(--ease-out, ease),visibility 0s linear var(--dur-base, .32s)}.hd-frame-stage.is-active{opacity:1;visibility:visible;transition:opacity var(--dur-base, .32s) var(--ease-out, ease),visibility 0s}.hd-frame-stage .hd-frame{width:min(64cqw,calc(70cqh * var(--total-w) / var(--total-h)));margin-bottom:6cqh}.hd-frame-stage__caption{position:absolute;left:0;right:0;bottom:4cqh;text-align:center;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.02em;color:rgb(var(--color-warm-gray));font-variant-numeric:tabular-nums}.hd-frame-thumb{display:grid;place-items:center;width:100%;height:100%;container-type:size;background:linear-gradient(180deg,rgb(var(--color-parchment-light)),rgb(var(--color-parchment)))}.hd-frame-thumb .hd-frame{width:min(62cqw,calc(74cqh * var(--total-w) / var(--total-h)));box-shadow:0 1px 2px #2d2d2d33,0 4px 8px -2px #2d2d2d33}[data-hd-frame-preview] [data-hd-swatch]{background:repeating-linear-gradient(90deg,rgb(60 38 18 / calc(.1 * var(--fr-grain))) 0 1px,transparent 1px 3px,transparent 3px 7px),linear-gradient(135deg,var(--fr-light),var(--fr-base) 50%,var(--fr-dark))}html:not([data-hd-frame-preview]) .hd-frame-stage,html:not([data-hd-frame-preview]) [data-hd-frame-thumb],html:not([data-hd-scale]) [data-hd-scale-scene]{display:none!important}@media(prefers-reduced-motion:reduce){.hd-frame,.hd-frame-stage,.hd-frame-stage.is-active{transition:none!important}}
/*# sourceMappingURL=/cdn/shop/t/64/assets/hd-frame.css.map */