/* Mystic Hollow round 3: frame.css (owner: builder B)
   The product frame (site/parts/product.mjs): the real pack standing inside a photograph of its own ingredients, lit like
   a product shot, behind wet glass. Every colour comes from a theme token (--key, --c, --bg-deep, --text ...); the dew is
   an alpha-only mask painted in token colours, so variations re-skin it for free.
   Easing: --settle (arrivals that brake hard), --recede (stepping back). Everything under a second and a half. */

/* ---------- the frame and its image-space world ---------- */
.frame { position: relative; --c: var(--accent); }
.fr-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; overflow: hidden; container-type: size; isolation: isolate; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .5s var(--settle); }
.frame--wide .fr-media { aspect-ratio: 16 / 9; }
div.fr-media { cursor: default; }
.fr-media:hover { border-color: color-mix(in srgb, var(--c) 34%, var(--line)); }
/* The world covers the frame like object-fit: cover, focused on (--fx, --fy). The scene, pool, pack and hotspots are placed
   in fractions of it, so every crop keeps the pack on its patch of stone and each hotspot on its ingredient. */
.fr-world { --w: max(100cqw, 100cqh * var(--ar)); position: absolute; width: var(--w); height: calc(var(--w) / var(--ar)); left: calc((100cqw - var(--w)) * var(--fx)); top: calc((100cqh - var(--w) / var(--ar)) * var(--fy)); }
/* the scene's motion loop over the still; a soft spot over the plinth keeps the stone under the pack perfectly still */
.fr-motion { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* H3 crops the sides of the still: contain lines it up */ filter: brightness(.9) saturate(.98); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 28% 26% at calc(var(--x) * 100%) calc(var(--y) * 100% + 9%), transparent 58%, #000 100%);
  mask-image: radial-gradient(ellipse 28% 26% at calc(var(--x) * 100%) calc(var(--y) * 100% + 9%), transparent 58%, #000 100%); }
.fr-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: brightness(.9) saturate(.98); transform-origin: calc(var(--x) * 100%) calc(var(--y) * 100%); transition: transform 1.4s var(--settle), filter .8s var(--settle); }
.fr-world::after { /* grade: a soft vignette that keeps the eye on the pack */ content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(95% 80% at calc(var(--x) * 100%) 72%, transparent 45%, color-mix(in srgb, var(--bg-deep) 62%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 42%, transparent), transparent 22%); }

/* warm key pool on the stone where the pack stands */
.fr-pool { position: absolute; z-index: 2; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 74%; aspect-ratio: 2.1; transform: translate(-50%, -64%); pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(var(--key) / .3), rgb(var(--key) / .1) 52%, transparent); }
.frame--wide .fr-pool { width: 42%; }

/* ---------- the pack ----------
   .fr-stand is the pack's place in the world: x, the base line y, and the real pack's height h. .fr-pack is the real pack's
   own outline box standing on that line (.pk, geometry from site/parts/packs.mjs); the cutout file (.pk-img), its wet
   reflection (.pk-refl) and the contact shadow (.pk-shadow) hang off it in base.css, so any new cutout stands on the stone. */
.fr-stand { position: absolute; z-index: 3; left: calc(var(--x) * 100%); top: calc((var(--y) - var(--h)) * 100%); width: 0; height: calc(var(--h) * 100%); }
.fr-pack { position: absolute; left: 0; bottom: 0; height: 100%; translate: -50% 0; }
.fr-prod { filter: contrast(1.04) saturate(.97); transition: translate .9s var(--settle); }
/* a faint, wide ambient tint of the key light and the product's own colour around it; never a halo on its edge */
.fr-halo { position: absolute; z-index: -1; left: 50%; top: 56%; width: 280%; height: 128%; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--key) / .08), transparent 72%), radial-gradient(38% 44% at 54% 58%, color-mix(in srgb, var(--c) 6%, transparent), transparent 75%); }
/* the key light from the upper left, masked to the pack's own silhouette, with a few beads of dew on it */
.fr-key { position: absolute; z-index: 2; pointer-events: none; mix-blend-mode: screen; transition: translate .9s var(--settle);
  width: calc(100% / (1 - var(--pk-ml) - var(--pk-mr))); height: calc(100% / var(--pk-hc));
  left: calc(-100% * var(--pk-ml) / (1 - var(--pk-ml) - var(--pk-mr))); top: calc(-100% * var(--pk-mt) / var(--pk-hc));
  background:
    radial-gradient(circle at 26% 31%, rgb(var(--glint) / .7) 0 1px, transparent 2px),
    radial-gradient(circle at 63% 22%, rgb(var(--glint) / .6) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 44% 57%, rgb(var(--glint) / .6) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 70%, rgb(var(--glint) / .5) 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 33% 80%, rgb(var(--glint) / .5) 0 1px, transparent 2px),
    linear-gradient(112deg, rgb(var(--key) / .3) 0%, rgb(var(--key) / .09) 30%, transparent 56%);
  -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.fr-refl { opacity: .14; transition: translate .9s var(--settle); }

/* ---------- the glass: dew, fog at the foot, a sheen ---------- */
.fr-dew { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .42; transition: opacity 1.1s var(--settle);
  background: linear-gradient(0deg, rgb(var(--key) / .08), transparent 30%);
  --dew-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' width='400' height='500'%3E%3Cdefs%3E%3CradialGradient id='r'%3E%3Cstop offset='.55' stop-opacity='.06'/%3E%3Cstop offset='.86' stop-opacity='.75'/%3E%3Cstop offset='1' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg fill='url(%23r)'%3E%3Ccircle cx='153.5' cy='20' r='1.5'/%3E%3Ccircle cx='7.5' cy='462.5' r='1.5'/%3E%3Ccircle cx='320' cy='130.5' r='1.5'/%3E%3Ccircle cx='400' cy='395.5' r='1.5'/%3E%3Ccircle cx='203.5' cy='374' r='2'/%3E%3Ccircle cx='371' cy='267' r='2'/%3E%3Ccircle cx='220.5' cy='329.5' r='2'/%3E%3Ccircle cx='392' cy='88' r='1.5'/%3E%3Ccircle cx='227.5' cy='486' r='2'/%3E%3Ccircle cx='63.5' cy='119' r='1.5'/%3E%3Ccircle cx='115.5' cy='379' r='1.5'/%3E%3Ccircle cx='136' cy='406' r='2'/%3E%3Ccircle cx='197' cy='496' r='1.5'/%3E%3Ccircle cx='252' cy='100.5' r='1.5'/%3E%3Ccircle cx='335' cy='128.5' r='1.5'/%3E%3Ccircle cx='125' cy='169' r='1.5'/%3E%3Ccircle cx='177' cy='303.5' r='1.5'/%3E%3Ccircle cx='3.5' cy='347' r='1.5'/%3E%3Ccircle cx='384' cy='281.5' r='1.5'/%3E%3Ccircle cx='349' cy='324.5' r='1.5'/%3E%3Ccircle cx='189' cy='464.5' r='1.5'/%3E%3Ccircle cx='276' cy='496.5' r='2.5'/%3E%3Ccircle cx='161.5' cy='461.5' r='2'/%3E%3Ccircle cx='139.5' cy='228.5' r='1.5'/%3E%3Ccircle cx='45' cy='479.5' r='1.5'/%3E%3Ccircle cx='165.5' cy='100.5' r='1.5'/%3E%3Ccircle cx='146' cy='193.5' r='2'/%3E%3Ccircle cx='250.5' cy='283' r='1.5'/%3E%3Ccircle cx='295.5' cy='382' r='2'/%3E%3Ccircle cx='129.5' cy='70' r='1.5'/%3E%3Ccircle cx='27' cy='447' r='1.5'/%3E%3Ccircle cx='265' cy='261' r='1.5'/%3E%3Ccircle cx='148.5' cy='364' r='1.5'/%3E%3Ccircle cx='38.5' cy='12.5' r='1.5'/%3E%3Ccircle cx='5.5' cy='355.5' r='2'/%3E%3Ccircle cx='307.5' cy='173' r='1.5'/%3E%3Ccircle cx='117' cy='71.5' r='1.5'/%3E%3Ccircle cx='181' cy='50.5' r='1.5'/%3E%3Ccircle cx='281.5' cy='266.5' r='1.5'/%3E%3Ccircle cx='243' cy='264.5' r='1.5'/%3E%3Ccircle cx='342.5' cy='354.5' r='2'/%3E%3Ccircle cx='189' cy='107.5' r='1.5'/%3E%3Ccircle cx='339.5' cy='389.5' r='1.5'/%3E%3Ccircle cx='377.5' cy='369.5' r='2'/%3E%3Ccircle cx='26.5' cy='23.5' r='1.5'/%3E%3Ccircle cx='300.5' cy='338' r='2'/%3E%3Ccircle cx='109.5' cy='281' r='1.5'/%3E%3Ccircle cx='73.5' cy='328.5' r='1.5'/%3E%3Ccircle cx='211.5' cy='148' r='1.5'/%3E%3Ccircle cx='236.5' cy='280.5' r='1.5'/%3E%3Ccircle cx='196.5' cy='387' r='1.5'/%3E%3Ccircle cx='245.5' cy='221' r='1.5'/%3E%3Ccircle cx='145' cy='412.5' r='1.5'/%3E%3Ccircle cx='393' cy='367' r='2'/%3E%3Ccircle cx='272.5' cy='297.5' r='1.5'/%3E%3Ccircle cx='84.5' cy='462' r='2'/%3E%3Ccircle cx='14' cy='253.5' r='2'/%3E%3Ccircle cx='190' cy='340' r='1.5'/%3E%3Ccircle cx='249.5' cy='496.5' r='2'/%3E%3Ccircle cx='175' cy='377' r='1.5'/%3E%3Ccircle cx='176.5' cy='411.5' r='2'/%3E%3Ccircle cx='300' cy='285' r='2'/%3E%3Ccircle cx='239.5' cy='177.5' r='2'/%3E%3Ccircle cx='120.5' cy='483.5' r='1.5'/%3E%3Ccircle cx='322' cy='242.5' r='1.5'/%3E%3Ccircle cx='340.5' cy='245' r='1.5'/%3E%3Ccircle cx='247' cy='96.5' r='1.5'/%3E%3Ccircle cx='159.5' cy='388' r='1.5'/%3E%3Ccircle cx='326' cy='191' r='1.5'/%3E%3Ccircle cx='358' cy='332.5' r='1.5'/%3E%3Ccircle cx='291' cy='333' r='1.5'/%3E%3Ccircle cx='313.5' cy='444' r='1.5'/%3E%3Ccircle cx='383.5' cy='367' r='2'/%3E%3Ccircle cx='372.5' cy='193' r='1.5'/%3E%3Ccircle cx='70' cy='78.5' r='1.5'/%3E%3Ccircle cx='320.5' cy='370.5' r='1.5'/%3E%3Ccircle cx='381.5' cy='370' r='2'/%3E%3Ccircle cx='75.5' cy='261.5' r='2'/%3E%3Ccircle cx='185' cy='366' r='2'/%3E%3Ccircle cx='135.5' cy='325' r='1.5'/%3E%3Ccircle cx='101.5' cy='330.5' r='1.5'/%3E%3Ccircle cx='120.5' cy='348.5' r='1.5'/%3E%3Ccircle cx='197.5' cy='468.5' r='2.5'/%3E%3Ccircle cx='180.5' cy='495' r='1.5'/%3E%3Ccircle cx='84' cy='344.5' r='2'/%3E%3Ccircle cx='64' cy='263' r='1.5'/%3E%3Ccircle cx='114' cy='475' r='1.5'/%3E%3Ccircle cx='147.5' cy='132.5' r='2'/%3E%3Ccircle cx='29.5' cy='40.5' r='1.5'/%3E%3Ccircle cx='187.5' cy='40.5' r='2.5'/%3E%3Ccircle cx='80' cy='321.5' r='3.5'/%3E%3Ccircle cx='315' cy='359.5' r='4'/%3E%3Ccircle cx='91.5' cy='499.5' r='2.5'/%3E%3Ccircle cx='142.5' cy='365.5' r='3.5'/%3E%3Ccircle cx='286.5' cy='233.5' r='4'/%3E%3Ccircle cx='317' cy='114' r='2.5'/%3E%3Ccircle cx='342.5' cy='344' r='2.5'/%3E%3Ccircle cx='123' cy='234.5' r='3.5'/%3E%3Ccircle cx='108.5' cy='211.5' r='2'/%3E%3Ccircle cx='366.5' cy='257.5' r='2'/%3E%3Ccircle cx='142' cy='200' r='4'/%3E%3Ccircle cx='31.5' cy='243' r='2.5'/%3E%3Ccircle cx='264' cy='211.5' r='2.5'/%3E%3Ccircle cx='347.5' cy='62.5' r='4.5'/%3E%3Ccircle cx='348' cy='12.5' r='4'/%3E%3Ccircle cx='145' cy='303.5' r='3.5'/%3E%3Ccircle cx='105' cy='220.5' r='4'/%3E%3Ccircle cx='230' cy='409.5' r='2.5'/%3E%3Ccircle cx='398.5' cy='190.5' r='3'/%3E%3Ccircle cx='194.5' cy='370.5' r='2.5'/%3E%3Ccircle cx='230.5' cy='239' r='3'/%3E%3Ccircle cx='31' cy='236' r='3.5'/%3E%3Ccircle cx='224' cy='312' r='2'/%3E%3Ccircle cx='28.5' cy='249.5' r='3'/%3E%3Ccircle cx='222.5' cy='146' r='4'/%3E%3Ccircle cx='373.5' cy='192' r='3'/%3E%3Ccircle cx='101.5' cy='48' r='2.5'/%3E%3Ccircle cx='269' cy='105' r='3'/%3E%3Ccircle cx='51.5' cy='14' r='2.5'/%3E%3Ccircle cx='99' cy='209' r='2.5'/%3E%3Ccircle cx='388.5' cy='58' r='3.5'/%3E%3Ccircle cx='132' cy='464' r='3'/%3E%3Ccircle cx='291.5' cy='444.5' r='2.5'/%3E%3Ccircle cx='184.5' cy='443.5' r='3'/%3E%3Ccircle cx='300.5' cy='265' r='3'/%3E%3Ccircle cx='324' cy='401.5' r='3.5'/%3E%3Ccircle cx='284.5' cy='125' r='3'/%3E%3Ccircle cx='364.5' cy='82' r='4'/%3E%3Ccircle cx='322' cy='447' r='4.5'/%3E%3Ccircle cx='138' cy='166' r='4'/%3E%3Ccircle cx='202' cy='365.5' r='3'/%3E%3Ccircle cx='145.5' cy='407' r='2.5'/%3E%3Cellipse cx='371.5' cy='146.5' rx='5.5' ry='6.5'/%3E%3Cellipse cx='333' cy='368' rx='5.5' ry='6.5'/%3E%3Cellipse cx='75' cy='123' rx='5.5' ry='6.5'/%3E%3Cellipse cx='162' cy='165.5' rx='7' ry='8'/%3E%3Cellipse cx='368' cy='214' rx='8' ry='9'/%3E%3Cellipse cx='102' cy='151' rx='7' ry='8'/%3E%3Cellipse cx='80.5' cy='352' rx='5.5' ry='6'/%3E%3Cellipse cx='40' cy='308.5' rx='5' ry='5.5'/%3E%3Cellipse cx='54.5' cy='330' rx='6' ry='7'/%3E%3Cellipse cx='205.5' cy='344' rx='5' ry='5.5'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.12' stroke-width='1.6'%3E%3Cpath d='M40 44.5Q42 176.5 40 308.5'/%3E%3Cpath d='M54.5 86Q56.5 208 54.5 330'/%3E%3Cpath d='M205.5 47Q207.5 195.5 205.5 344'/%3E%3C/g%3E%3C/svg%3E");
  --dew-hi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 500' width='400' height='500'%3E%3Ccircle cx='87' cy='193' r='0.5'/%3E%3Ccircle cx='152' cy='114.5' r='0.5'/%3E%3Ccircle cx='294' cy='159' r='0.5'/%3E%3Ccircle cx='230' cy='145' r='0.5'/%3E%3Ccircle cx='153' cy='19.5' r='0.5'/%3E%3Ccircle cx='7' cy='462' r='0.5'/%3E%3Ccircle cx='319' cy='129.5' r='0.5'/%3E%3Ccircle cx='399.5' cy='395' r='0.5'/%3E%3Ccircle cx='101.5' cy='265.5' r='0.5'/%3E%3Ccircle cx='380.5' cy='30' r='0.5'/%3E%3Ccircle cx='380' cy='368.5' r='0.5'/%3E%3Ccircle cx='203' cy='373.5' r='0.5'/%3E%3Ccircle cx='370.5' cy='266.5' r='0.5'/%3E%3Ccircle cx='324' cy='263' r='0.5'/%3E%3Ccircle cx='150.5' cy='319.5' r='0.5'/%3E%3Ccircle cx='219.5' cy='328.5' r='0.5'/%3E%3Ccircle cx='391' cy='87' r='0.5'/%3E%3Ccircle cx='258' cy='446.5' r='0.5'/%3E%3Ccircle cx='227' cy='485' r='0.5'/%3E%3Ccircle cx='63' cy='118' r='0.5'/%3E%3Ccircle cx='114.5' cy='378' r='0.5'/%3E%3Ccircle cx='351.5' cy='233.5' r='0.5'/%3E%3Ccircle cx='135.5' cy='405' r='0.5'/%3E%3Ccircle cx='126.5' cy='425.5' r='0.5'/%3E%3Ccircle cx='196.5' cy='495.5' r='0.5'/%3E%3Ccircle cx='261' cy='133.5' r='0.5'/%3E%3Ccircle cx='105.5' cy='173' r='0.5'/%3E%3Ccircle cx='251.5' cy='100' r='0.5'/%3E%3Ccircle cx='334.5' cy='128' r='0.5'/%3E%3Ccircle cx='124.5' cy='168.5' r='0.5'/%3E%3Ccircle cx='224.5' cy='379' r='0.5'/%3E%3Ccircle cx='177' cy='302.5' r='0.5'/%3E%3Ccircle cx='313.5' cy='20' r='0.5'/%3E%3Ccircle cx='3' cy='346.5' r='0.5'/%3E%3Ccircle cx='300' cy='499' r='0.5'/%3E%3Ccircle cx='226' cy='140' r='0.5'/%3E%3Ccircle cx='383.5' cy='281' r='0.5'/%3E%3Ccircle cx='231' cy='69' r='0.5'/%3E%3Ccircle cx='364.5' cy='139' r='0.5'/%3E%3Ccircle cx='348.5' cy='324' r='0.5'/%3E%3Ccircle cx='33' cy='146.5' r='0.5'/%3E%3Ccircle cx='393' cy='418.5' r='0.5'/%3E%3Ccircle cx='189' cy='464' r='0.5'/%3E%3Ccircle cx='275' cy='495.5' r='0.5'/%3E%3Ccircle cx='0' cy='300' r='0.5'/%3E%3Ccircle cx='161' cy='461' r='0.5'/%3E%3Ccircle cx='139' cy='228' r='0.5'/%3E%3Ccircle cx='384' cy='196.5' r='0.5'/%3E%3Ccircle cx='218' cy='104.5' r='0.5'/%3E%3Ccircle cx='151.5' cy='297.5' r='0.5'/%3E%3Ccircle cx='44' cy='479' r='0.5'/%3E%3Ccircle cx='331' cy='449' r='0.5'/%3E%3Ccircle cx='165' cy='100' r='0.5'/%3E%3Ccircle cx='296.5' cy='364' r='0.5'/%3E%3Ccircle cx='145.5' cy='193' r='0.5'/%3E%3Ccircle cx='232' cy='349.5' r='0.5'/%3E%3Ccircle cx='250' cy='282.5' r='0.5'/%3E%3Ccircle cx='167' cy='428' r='0.5'/%3E%3Ccircle cx='295' cy='381.5' r='0.5'/%3E%3Ccircle cx='129' cy='69' r='0.5'/%3E%3Ccircle cx='26.5' cy='446' r='0.5'/%3E%3Ccircle cx='175' cy='246' r='0.5'/%3E%3Ccircle cx='136.5' cy='66' r='0.5'/%3E%3Ccircle cx='264.5' cy='260.5' r='0.5'/%3E%3Ccircle cx='148' cy='363' r='0.5'/%3E%3Ccircle cx='38' cy='12' r='0.5'/%3E%3Ccircle cx='4.5' cy='354.5' r='0.5'/%3E%3Ccircle cx='307' cy='172.5' r='0.5'/%3E%3Ccircle cx='362.5' cy='186' r='0.5'/%3E%3Ccircle cx='116.5' cy='71' r='0.5'/%3E%3Ccircle cx='180.5' cy='49.5' r='0.5'/%3E%3Ccircle cx='374' cy='420' r='0.5'/%3E%3Ccircle cx='281' cy='266' r='0.5'/%3E%3Ccircle cx='36' cy='490' r='0.5'/%3E%3Ccircle cx='292' cy='115' r='0.5'/%3E%3Ccircle cx='242.5' cy='264' r='0.5'/%3E%3Ccircle cx='364' cy='390' r='0.5'/%3E%3Ccircle cx='68' cy='117.5' r='0.5'/%3E%3Ccircle cx='196.5' cy='229.5' r='0.5'/%3E%3Ccircle cx='341.5' cy='353.5' r='0.5'/%3E%3Ccircle cx='188.5' cy='106.5' r='0.5'/%3E%3Ccircle cx='138.5' cy='247' r='0.5'/%3E%3Ccircle cx='345.5' cy='68.5' r='0.5'/%3E%3Ccircle cx='339' cy='389' r='0.5'/%3E%3Ccircle cx='377' cy='368.5' r='0.5'/%3E%3Ccircle cx='146.5' cy='378' r='0.5'/%3E%3Ccircle cx='26.5' cy='22.5' r='0.5'/%3E%3Ccircle cx='300' cy='337' r='0.5'/%3E%3Ccircle cx='143.5' cy='148' r='0.5'/%3E%3Ccircle cx='109.5' cy='280.5' r='0.5'/%3E%3Ccircle cx='184' cy='483' r='0.5'/%3E%3Ccircle cx='156' cy='172' r='0.5'/%3E%3Ccircle cx='159.5' cy='214.5' r='0.5'/%3E%3Ccircle cx='34' cy='415.5' r='0.5'/%3E%3Ccircle cx='72.5' cy='327.5' r='0.5'/%3E%3Ccircle cx='302.5' cy='140.5' r='0.5'/%3E%3Ccircle cx='211' cy='147.5' r='0.5'/%3E%3Ccircle cx='235.5' cy='279.5' r='0.5'/%3E%3Ccircle cx='196' cy='386.5' r='0.5'/%3E%3Ccircle cx='245' cy='220.5' r='0.5'/%3E%3Ccircle cx='144.5' cy='412' r='0.5'/%3E%3Ccircle cx='21.5' cy='180' r='0.5'/%3E%3Ccircle cx='392.5' cy='366' r='0.5'/%3E%3Ccircle cx='167' cy='10' r='0.5'/%3E%3Ccircle cx='272' cy='296.5' r='0.5'/%3E%3Ccircle cx='83.5' cy='461.5' r='0.5'/%3E%3Ccircle cx='224' cy='58' r='0.5'/%3E%3Ccircle cx='13.5' cy='253' r='0.5'/%3E%3Ccircle cx='189.5' cy='339.5' r='0.5'/%3E%3Ccircle cx='352.5' cy='254' r='0.5'/%3E%3Ccircle cx='249' cy='496' r='0.5'/%3E%3Ccircle cx='199' cy='480.5' r='0.5'/%3E%3Ccircle cx='174.5' cy='376.5' r='0.5'/%3E%3Ccircle cx='88' cy='387.5' r='0.5'/%3E%3Ccircle cx='391' cy='176.5' r='0.5'/%3E%3Ccircle cx='175.5' cy='410.5' r='0.5'/%3E%3Ccircle cx='299' cy='284.5' r='0.5'/%3E%3Ccircle cx='250' cy='54' r='0.5'/%3E%3Ccircle cx='294.5' cy='462.5' r='0.5'/%3E%3Ccircle cx='170.5' cy='315.5' r='0.5'/%3E%3Ccircle cx='239' cy='176.5' r='0.5'/%3E%3Ccircle cx='120' cy='483' r='0.5'/%3E%3Ccircle cx='13.5' cy='250' r='0.5'/%3E%3Ccircle cx='170' cy='135.5' r='0.5'/%3E%3Ccircle cx='321.5' cy='242' r='0.5'/%3E%3Ccircle cx='72' cy='269' r='0.5'/%3E%3Ccircle cx='115.5' cy='438.5' r='0.5'/%3E%3Ccircle cx='339.5' cy='244' r='0.5'/%3E%3Ccircle cx='246.5' cy='96' r='0.5'/%3E%3Ccircle cx='159' cy='387' r='0.5'/%3E%3Ccircle cx='14' cy='69' r='0.5'/%3E%3Ccircle cx='341.5' cy='287' r='0.5'/%3E%3Ccircle cx='296.5' cy='326.5' r='0.5'/%3E%3Ccircle cx='27.5' cy='156' r='0.5'/%3E%3Ccircle cx='115' cy='391.5' r='0.5'/%3E%3Ccircle cx='325.5' cy='190.5' r='0.5'/%3E%3Ccircle cx='219' cy='336' r='0.5'/%3E%3Ccircle cx='49' cy='346' r='0.5'/%3E%3Ccircle cx='320.5' cy='38.5' r='0.5'/%3E%3Ccircle cx='357.5' cy='332' r='0.5'/%3E%3Ccircle cx='290.5' cy='332' r='0.5'/%3E%3Ccircle cx='289' cy='219' r='0.5'/%3E%3Ccircle cx='103.5' cy='164' r='0.5'/%3E%3Ccircle cx='313' cy='443.5' r='0.5'/%3E%3Ccircle cx='288' cy='141.5' r='0.5'/%3E%3Ccircle cx='383' cy='366' r='0.5'/%3E%3Ccircle cx='297.5' cy='436.5' r='0.5'/%3E%3Ccircle cx='372' cy='192.5' r='0.5'/%3E%3Ccircle cx='275' cy='171.5' r='0.5'/%3E%3Ccircle cx='69' cy='78' r='0.5'/%3E%3Ccircle cx='320' cy='370' r='0.5'/%3E%3Ccircle cx='380.5' cy='369' r='0.5'/%3E%3Ccircle cx='75' cy='261' r='0.5'/%3E%3Ccircle cx='184.5' cy='365' r='0.5'/%3E%3Ccircle cx='135' cy='324.5' r='0.5'/%3E%3Ccircle cx='101' cy='330' r='0.5'/%3E%3Ccircle cx='120' cy='348' r='0.5'/%3E%3Ccircle cx='196.5' cy='467.5' r='0.5'/%3E%3Ccircle cx='180' cy='494' r='0.5'/%3E%3Ccircle cx='323' cy='389.5' r='0.5'/%3E%3Ccircle cx='383' cy='213.5' r='0.5'/%3E%3Ccircle cx='83.5' cy='343.5' r='0.5'/%3E%3Ccircle cx='195.5' cy='381' r='0.5'/%3E%3Ccircle cx='63.5' cy='262.5' r='0.5'/%3E%3Ccircle cx='289.5' cy='341' r='0.5'/%3E%3Ccircle cx='379.5' cy='237.5' r='0.5'/%3E%3Ccircle cx='113.5' cy='474.5' r='0.5'/%3E%3Ccircle cx='159' cy='220' r='0.5'/%3E%3Ccircle cx='80' cy='107' r='0.5'/%3E%3Ccircle cx='146.5' cy='131.5' r='0.5'/%3E%3Ccircle cx='228' cy='135' r='0.5'/%3E%3Ccircle cx='155.5' cy='464' r='0.5'/%3E%3Ccircle cx='357' cy='321' r='0.5'/%3E%3Ccircle cx='257.5' cy='115' r='0.5'/%3E%3Ccircle cx='29' cy='40' r='0.5'/%3E%3Ccircle cx='122' cy='455' r='0.5'/%3E%3Ccircle cx='187' cy='39.5' r='0.5'/%3E%3Ccircle cx='79' cy='320' r='1'/%3E%3Ccircle cx='314' cy='358' r='1'/%3E%3Ccircle cx='90.5' cy='498.5' r='0.5'/%3E%3Ccircle cx='141' cy='364' r='1'/%3E%3Ccircle cx='285.5' cy='232' r='1'/%3E%3Ccircle cx='316' cy='113' r='0.5'/%3E%3Ccircle cx='341.5' cy='343' r='0.5'/%3E%3Ccircle cx='121.5' cy='233' r='1'/%3E%3Ccircle cx='108' cy='210.5' r='0.5'/%3E%3Ccircle cx='366' cy='257' r='0.5'/%3E%3Ccircle cx='140.5' cy='198' r='1'/%3E%3Ccircle cx='31' cy='242' r='0.5'/%3E%3Ccircle cx='263' cy='210.5' r='0.5'/%3E%3Ccircle cx='346' cy='61' r='1'/%3E%3Ccircle cx='346.5' cy='10.5' r='1'/%3E%3Ccircle cx='144' cy='302' r='1'/%3E%3Ccircle cx='103.5' cy='219' r='1'/%3E%3Ccircle cx='229' cy='408.5' r='0.5'/%3E%3Ccircle cx='397.5' cy='189' r='1'/%3E%3Ccircle cx='193.5' cy='369.5' r='0.5'/%3E%3Ccircle cx='229.5' cy='238' r='1'/%3E%3Ccircle cx='29.5' cy='234.5' r='1'/%3E%3Ccircle cx='223.5' cy='311' r='0.5'/%3E%3Ccircle cx='27.5' cy='248' r='1'/%3E%3Ccircle cx='221' cy='144.5' r='1'/%3E%3Ccircle cx='372.5' cy='191' r='0.5'/%3E%3Ccircle cx='100.5' cy='47' r='0.5'/%3E%3Ccircle cx='268' cy='103.5' r='0.5'/%3E%3Ccircle cx='50.5' cy='13' r='0.5'/%3E%3Ccircle cx='98.5' cy='208' r='0.5'/%3E%3Ccircle cx='387' cy='56.5' r='1'/%3E%3Ccircle cx='131' cy='463' r='1'/%3E%3Ccircle cx='290.5' cy='443.5' r='0.5'/%3E%3Ccircle cx='183.5' cy='442' r='1'/%3E%3Ccircle cx='299.5' cy='264' r='1'/%3E%3Ccircle cx='322.5' cy='400' r='1'/%3E%3Ccircle cx='284' cy='124' r='0.5'/%3E%3Ccircle cx='363' cy='80.5' r='1'/%3E%3Ccircle cx='320.5' cy='445' r='1'/%3E%3Ccircle cx='136.5' cy='164.5' r='1'/%3E%3Ccircle cx='201' cy='364.5' r='0.5'/%3E%3Ccircle cx='144.5' cy='406' r='0.5'/%3E%3Ccircle cx='370' cy='144.5' r='1.5'/%3E%3Ccircle cx='331' cy='366' r='1.5'/%3E%3Ccircle cx='73' cy='120.5' r='1.5'/%3E%3Ccircle cx='159.5' cy='162.5' r='2'/%3E%3Ccircle cx='365' cy='210.5' r='2'/%3E%3Ccircle cx='99.5' cy='148' r='2'/%3E%3Ccircle cx='78.5' cy='349.5' r='1.5'/%3E%3Ccircle cx='38.5' cy='306.5' r='1.5'/%3E%3Ccircle cx='52.5' cy='327.5' r='1.5'/%3E%3Ccircle cx='204' cy='342' r='1'/%3E%3Cg fill-opacity='.35'%3E%3Cellipse cx='371.5' cy='268.5' rx='1' ry='0.5'/%3E%3Cellipse cx='228' cy='487' rx='1' ry='0.5'/%3E%3Cellipse cx='276' cy='497.5' rx='1' ry='0.5'/%3E%3Cellipse cx='162' cy='462.5' rx='1' ry='0.5'/%3E%3Cellipse cx='5.5' cy='356.5' rx='1' ry='0.5'/%3E%3Cellipse cx='342.5' cy='355.5' rx='1' ry='0.5'/%3E%3Cellipse cx='393.5' cy='368' rx='1' ry='0.5'/%3E%3Cellipse cx='84.5' cy='463' rx='1' ry='0.5'/%3E%3Cellipse cx='381.5' cy='371' rx='1' ry='0.5'/%3E%3Cellipse cx='185.5' cy='367.5' rx='1' ry='0.5'/%3E%3Cellipse cx='197.5' cy='469.5' rx='1' ry='0.5'/%3E%3Cellipse cx='188' cy='42' rx='1.5' ry='0.5'/%3E%3Cellipse cx='80.5' cy='323.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='316' cy='361.5' rx='2' ry='1'/%3E%3Cellipse cx='92' cy='501' rx='1.5' ry='0.5'/%3E%3Cellipse cx='143' cy='367' rx='1.5' ry='0.5'/%3E%3Cellipse cx='287.5' cy='235.5' rx='2' ry='1'/%3E%3Cellipse cx='317.5' cy='115.5' rx='1' ry='0.5'/%3E%3Cellipse cx='342.5' cy='345' rx='1.5' ry='0.5'/%3E%3Cellipse cx='123.5' cy='236' rx='1.5' ry='0.5'/%3E%3Cellipse cx='109' cy='212.5' rx='1' ry='0.5'/%3E%3Cellipse cx='367' cy='258.5' rx='1' ry='0.5'/%3E%3Cellipse cx='142.5' cy='202' rx='2' ry='1'/%3E%3Cellipse cx='32' cy='244.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='264' cy='212.5' rx='1' ry='0.5'/%3E%3Cellipse cx='348' cy='64.5' rx='2' ry='1'/%3E%3Cellipse cx='348.5' cy='14.5' rx='2' ry='1'/%3E%3Cellipse cx='145.5' cy='305' rx='1.5' ry='0.5'/%3E%3Cellipse cx='105.5' cy='222.5' rx='2' ry='1'/%3E%3Cellipse cx='230' cy='411' rx='1.5' ry='0.5'/%3E%3Cellipse cx='399' cy='192' rx='1.5' ry='0.5'/%3E%3Cellipse cx='194.5' cy='371.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='231' cy='241' rx='1.5' ry='0.5'/%3E%3Cellipse cx='31.5' cy='238' rx='1.5' ry='0.5'/%3E%3Cellipse cx='224.5' cy='313' rx='1' ry='0.5'/%3E%3Cellipse cx='29' cy='251' rx='1.5' ry='0.5'/%3E%3Cellipse cx='223' cy='148' rx='2' ry='1'/%3E%3Cellipse cx='374' cy='193.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='102' cy='49.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='269.5' cy='106.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='52' cy='15' rx='1.5' ry='0.5'/%3E%3Cellipse cx='99.5' cy='210' rx='1' ry='0.5'/%3E%3Cellipse cx='389' cy='59.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='132.5' cy='465.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='292' cy='445.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='184.5' cy='444.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='301' cy='266.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='324.5' cy='403.5' rx='2' ry='0.5'/%3E%3Cellipse cx='285' cy='126.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='365' cy='84' rx='2' ry='1'/%3E%3Cellipse cx='322.5' cy='449' rx='2' ry='1'/%3E%3Cellipse cx='138.5' cy='168' rx='2' ry='1'/%3E%3Cellipse cx='202.5' cy='367' rx='1.5' ry='0.5'/%3E%3Cellipse cx='146' cy='408.5' rx='1.5' ry='0.5'/%3E%3Cellipse cx='372.5' cy='149.5' rx='3' ry='1'/%3E%3Cellipse cx='334' cy='371' rx='3' ry='1'/%3E%3Cellipse cx='75.5' cy='125.5' rx='3' ry='1'/%3E%3Cellipse cx='163' cy='169' rx='3.5' ry='1.5'/%3E%3Cellipse cx='369' cy='217.5' rx='4' ry='1.5'/%3E%3Cellipse cx='103' cy='154' rx='3.5' ry='1.5'/%3E%3Cellipse cx='81' cy='354.5' rx='2.5' ry='1'/%3E%3Cellipse cx='41' cy='311' rx='2.5' ry='1'/%3E%3Cellipse cx='55.5' cy='333' rx='3' ry='1'/%3E%3Cellipse cx='206.5' cy='346.5' rx='2.5' ry='1'/%3E%3C/g%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.22' stroke-width='.7'%3E%3Cpath d='M39 54.5Q41 176.5 39 301.5'/%3E%3Cpath d='M53.5 96Q55.5 208 53.5 323'/%3E%3Cpath d='M204.5 57Q206.5 195.5 204.5 337'/%3E%3C/g%3E%3C/svg%3E");
}
.fr-dew::before, .fr-dew::after { content: ''; position: absolute; inset: 0; -webkit-mask: var(--dew-rim) var(--dx, 0) var(--dy, 0) / 400px 500px repeat; mask: var(--dew-rim) var(--dx, 0) var(--dy, 0) / 400px 500px repeat; background: rgb(var(--shade)); opacity: .55; }
.fr-dew::after { -webkit-mask-image: var(--dew-hi); mask-image: var(--dew-hi); background: rgb(var(--glint)); opacity: .8; }
.fr-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .7; background: linear-gradient(118deg, transparent 30%, rgb(var(--key) / .06) 42%, transparent 54%); background-size: 220% 100%; background-position: 100% 0; transition: background-position 1.6s var(--settle); }

/* ---------- hotspots: the ingredients in the picture ---------- */
.hot { position: absolute; z-index: 6;
  /* clamp the dot inside the visible window of the world (the world is cropped like object-fit: cover) */
  left: clamp(calc((var(--w) - 100cqw) * var(--fx) + 18px), var(--x), calc((var(--w) - 100cqw) * var(--fx) + 100cqw - 18px));
  top: clamp(calc((var(--w) / var(--ar) - 100cqh) * var(--fy) + 22px), var(--y), calc((var(--w) / var(--ar) - 100cqh) * var(--fy) + 100cqh - 22px)); display: inline-flex; align-items: center; gap: 9px; padding: 6px 11px 6px 6px; border: 1px solid var(--line-2); border-radius: 2px;
  background: color-mix(in srgb, var(--bg-deep) 76%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 14px/1 var(--sans); color: var(--text); white-space: nowrap; text-decoration: none; pointer-events: none;
  opacity: 0; transform: translate(-11px, -50%) translateY(6px); transition: opacity .45s var(--settle), transform .55s var(--settle), border-color .3s; transition-delay: calc(var(--k) * 90ms + 80ms); }
.hot i { flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--c); background: rgb(var(--glint) / .16); box-shadow: 0 0 10px var(--c), 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); }
.hot.is-l { flex-direction: row-reverse; padding: 6px 6px 6px 11px; transform: translate(calc(-100% + 11px), -50%) translateY(6px); }
a.hot { pointer-events: auto; }
a.hot:hover { border-color: var(--c); }
a.hot:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c); }

/* ---------- the cue ---------- */
.fr-cue { position: absolute; z-index: 7; left: 14px; bottom: 14px; padding: 9px 12px 8px; background: var(--btn-bg); color: var(--btn-ink); font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; opacity: 0; transform: translateY(6px); transition: opacity .35s var(--settle), transform .45s var(--settle); }

/* ---------- states ---------- */
@media (hover: hover) {
  .fr-media:hover .fr-img { transform: scale(1.045); filter: brightness(.92) saturate(1); }
  .fr-media:hover .fr-prod, .fr-media:hover .fr-key { translate: 0 -4px; }
  .fr-media:hover .fr-refl { translate: 0 4px; }
  .fr-media:hover .fr-dew { opacity: 1; }
  .fr-media:hover .fr-sheen { background-position: 0 0; }
  .fr-media:hover .hot { opacity: 1; transform: translate(-11px, -50%); }
  .fr-media:hover .hot.is-l { transform: translate(calc(-100% + 11px), -50%); }
  .fr-media:hover .fr-cue { opacity: 1; transform: none; }
}
.fr-media:focus-visible .hot { opacity: 1; transform: translate(-11px, -50%); }
.fr-media:focus-visible .hot.is-l { transform: translate(calc(-100% + 11px), -50%); }
.fr-media:focus-visible .fr-cue { opacity: 1; transform: none; }
.fr-media:focus-visible .fr-dew { opacity: 1; }
/* wide frames (the product page hero) are not a teaser: the glass is wet and the hotspots stay up */
.frame--wide .fr-dew { opacity: .9; }
.frame--wide .hot { opacity: 1; transform: translate(-11px, -50%); }
.frame--wide .hot.is-l { transform: translate(calc(-100% + 11px), -50%); }
@media (prefers-reduced-motion: no-preference) {
  .frame--wide .hot { animation: hot-in .7s var(--settle) both; animation-delay: calc(var(--k) * 110ms + 450ms); }
  @keyframes hot-in { from { opacity: 0; translate: 0 8px; } }
}
@media (prefers-reduced-motion: reduce) {
  .fr-img, .fr-prod, .fr-key, .fr-refl, .hot, .fr-cue, .fr-dew, .fr-sheen { transition: none; }
}

/* ---------- samples (?more=1): greyscale, owner-tagged ---------- */
.is-sample .fr-img { filter: grayscale(1) brightness(.62); }
.is-sample .fr-prod { filter: grayscale(1) brightness(.8) contrast(1.05); }
.is-sample .fr-halo, .is-sample .fr-pool, .is-sample .hot { display: none; }
.is-sample .fr-key { opacity: .5; }
.is-sample .card-type > span:first-child::before { background: var(--text-3); box-shadow: none; }

/* ---------- the card: a frame tile plus its caption (v16 type) ---------- */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; }
/* one column that never grows past the frame above it (an auto track would grow to the price row's min-content) */
.card-cap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-top: 16px; }
.card-type { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; font: 500 13px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.card-type > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.card-type > span:first-child::before { content: ''; width: 16px; height: 1px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.card-count { font: 400 13px/1.2 var(--mono); letter-spacing: 0; text-transform: none; color: var(--text-3); white-space: nowrap; }
.card-name { margin: 4px 0 0; font: 400 26px/1.12 var(--display); letter-spacing: -.005em; }
.card-name a { text-decoration: none; background: linear-gradient(var(--c), var(--c)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--settle); }
.card-name a:hover { background-size: 100% 1px; }
.card-sub { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); }
/* the price block (price over size) beside Add to bag: fits the narrowest card without cutting the size short */
.card-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; margin-top: 12px; padding-top: 13px; border-top: 1px solid var(--line); }
.card-row > :not(.card-add) { grid-column: 1; min-width: 0; justify-self: start; }
.card-row .size { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.card-row > .owner { margin: 0; }
.card-add { grid-column: 2; grid-row: 1 / span 2; flex: none; height: 38px; padding: 0 15px; border: 1px solid var(--line-2); border-radius: 2px; font: 600 12.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap; transition: border-color .3s, background .3s, color .3s; }
.card-add:hover { border-color: var(--text); }
.card-add.added { background: var(--text); color: var(--bg); border-color: var(--text); }
.card-add[disabled] { opacity: .55; cursor: not-allowed; }

/* an editorial tile that closes a row of cards */
.shop-note { display: block; }
.note-tile { position: relative; display: block; align-self: flex-start; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; background: var(--bg-2); }
.note-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; transition: transform 1.4s var(--settle), opacity .6s; }
.note-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--bg-deep) 88%, transparent), transparent 70%); }
.note-tile:hover .note-img { transform: scale(1.04); opacity: .8; }
.note-copy { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 26px; display: grid; gap: 12px; }
.note-copy b { font: 300 34px/1.06 var(--display); }
.note-copy > span { font-size: 15px; line-height: 1.5; color: var(--text-2); }
.note-copy .arrow-link { color: var(--text); }

/* a plain grid any page can use for cards: aligned, or staggered like v14 */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 46px 22px; }
.cards > li { display: flex; min-width: 0; }
.cards > li > .card { flex: 1; }
.cards.is-staggered > :nth-child(4n+2), .cards.is-staggered > :nth-child(4n+4) { margin-top: 56px; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cards.is-staggered > :nth-child(n) { margin-top: 0; } }
@media (max-width: 860px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 12px; }
  .card-name { font-size: 21px; }
  .card-type { font-size: 11.5px; letter-spacing: .1em; }
  .card-count { display: none; }
  .card-row { gap: 4px 10px; }
  .card-add { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 8px; }
  .hot { font-size: 12.5px; }
  .note-copy { left: 16px; right: 16px; bottom: 16px; }
  .note-copy b { font-size: 24px; }
  .note-copy > span { display: none; }
}