.tiles{background:var(--sg-cream);padding-top:70px;padding-bottom:36px}.tiles .tiles-wrap{position:relative}.tiles .tiles-label{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}.tiles .tiles-ph{font-size:12.5px;color:var(--sg-amethyst-ink)}.tiles .tiles-body{container-type:inline-size}.tiles .tiles-grid{--gap:12px;--tw:calc((100cqi - var(--gap)) / 2);--zr:.49;--zone:calc(var(--tw) * var(--zr));--peek:clamp(28px, calc(var(--tw) * .185), 56px);--pad:clamp(12px, calc(var(--tw) * .07), 22px);--r:var(--r-tile);--off:4px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);grid-template-rows:var(--zone) auto auto calc(var(--peek) + 10px) var(--zone) auto auto;margin:0;padding:var(--peek) 0 0;list-style:none}.tiles .tiles-item{position:relative;grid-row:span 3;display:grid;grid-template-rows:subgrid;min-width:0}.tiles .tiles-item:nth-child(n+3){grid-row:5 / span 3}.tiles .tiles-item:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--r);background:var(--sg-gold-deep);box-shadow:inset 0 0 0 1.5px var(--sg-ink);transform:translate(var(--off),var(--off));transition:transform .32s var(--spring)}.tiles .tile{--j:var(--j-fleur);position:relative;z-index:1;grid-row:1 / -1;display:grid;grid-template-rows:subgrid;min-width:0;padding:0 var(--pad) var(--pad);border-radius:var(--r);color:var(--sg-cream);text-decoration:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(128deg,transparent 22%,color-mix(in oklab,var(--sg-cream) 15%,transparent) 36%,transparent 50%),linear-gradient(to top,color-mix(in oklab,var(--sg-ink) 34%,transparent) 0%,color-mix(in oklab,var(--sg-ink) 18%,transparent) 30%,transparent 52%),radial-gradient(80% 34% at 50% 104%,color-mix(in oklab,var(--sg-ink) 36%,transparent),transparent 72%),radial-gradient(84% 52% at 50% 24%,color-mix(in oklab,var(--j) 64%,var(--sg-cream) 36%) 0%,transparent 70%),linear-gradient(170deg,color-mix(in oklab,var(--j) 80%,var(--sg-cream) 20%) 0%,var(--j) 42%,color-mix(in oklab,var(--j) 50%,var(--sg-ink)) 100%);box-shadow:inset 0 0 0 1.5px var(--sg-ink);transition:transform .32s var(--spring)}.tiles .tile:before{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:calc(var(--r) - 5px);box-shadow:inset 0 0 0 1px var(--sg-hair);pointer-events:none}.tiles .tile-zone{grid-row:1;position:relative;z-index:2;margin-inline:calc(-1 * var(--pad))}.tiles .tile-zone:after{content:"";position:absolute;left:50%;bottom:3px;width:58%;height:12px;transform:translate(-50%);border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--sg-ink) 62%,transparent),transparent);pointer-events:none;transition:transform .32s var(--spring),opacity .32s}.tiles .tile-img{position:absolute;z-index:1;left:50%;bottom:8px;height:calc(100% + var(--peek) - 8px);width:auto;max-width:none;transform:translate(-50%);filter:drop-shadow(0 10px 9px color-mix(in oklab,var(--sg-ink) 50%,transparent)) drop-shadow(0 2px 2px color-mix(in oklab,var(--sg-ink) 38%,transparent));transition:translate .32s var(--spring)}.tiles .tile-img--wrap{z-index:2;left:58%;height:calc(100% + var(--peek) - 8px);transform:translate(-50%) rotate(3deg)}.tiles .tile-img--bar{left:38%;bottom:12px;height:calc((100% + var(--peek) - 8px) * .92);transform:translate(-50%) rotate(-8deg)}.tiles .tile--bars .tile-zone:after{width:66%}.tiles .tile-img--sbs{--bh:calc((var(--zone) + var(--peek) - 6px) / 1.1065);height:var(--bh);width:auto;bottom:calc(6px + var(--bh) * .0533);transform:translate(-50%) rotate(24deg)}.tiles .tile-img--gift{height:calc(100% + var(--peek) - 8px)}.tiles .tile-img--vault{--vw:calc((var(--tw) - 14px) / 1.1);width:var(--vw);height:auto;bottom:calc(4px + var(--vw) * .105);transform:translate(-50%) rotate(-13deg)}.tiles .tile--vault .tile-zone:after{width:70%}.tiles .tiles-note{margin:10px 0 0;line-height:1;text-align:right}.tiles .tiles-note .placeholder-note{font-size:12.5px;color:var(--sg-amethyst-ink)}.tiles .tile-row{grid-row:2;position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:8px;min-width:0}.tiles .tile-name{flex:1 1 0;min-width:0;max-width:100%;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(18px,calc((var(--tw) - 72px) / 4.5),34px);line-height:1.06;letter-spacing:-.01em;color:var(--sg-cream);text-wrap:balance}.tiles .tile-arrow{--pop-h:clamp(44px, calc(var(--tw) * .17), 52px);flex:none;margin-left:auto;cursor:inherit}.tiles .tile-arrow .pop-face{pointer-events:none}.tiles .tile-arrow .icon{width:calc(var(--pop-h) * .46);height:calc(var(--pop-h) * .46);stroke-width:2}.tiles .tile-sub{grid-row:3;position:relative;z-index:1;margin-top:5px;font-size:12.5px;letter-spacing:.12em;line-height:1.4;color:var(--sg-cham);text-wrap:balance;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}@media(max-width:359px){.tiles .tiles-grid{--pad:10px}.tiles .tile-row{gap:6px}.tiles .tile-arrow{--pop-h:38px}}.tiles .tile:focus-visible{outline:3px solid var(--sg-amethyst-ink);outline-offset:7px;border-radius:var(--r)}.tiles .tile:active{transform:translate(2px,2px);transition-duration:.08s}.tiles .tile:active .tile-arrow .pop-face{transform:translate(2px);transition-duration:.08s}@media(hover:hover)and (pointer:fine){.tiles .tiles-item:hover:before{transform:translate(5px,3px)}.tiles .tiles-item:hover .tile{transform:translate(-3px,-5px)}.tiles .tiles-item:hover .tile-img{translate:0 -4px}.tiles .tiles-item:hover .tile-img--bar{translate:-3px -9px}.tiles .tiles-item:hover .tile-zone:after{transform:translate(-50%) scale(.9);opacity:.8}.tiles .tiles-item:hover .tile-arrow .pop-face{transform:translate(-3px,-3px) scale(1.04)}.tiles .tiles-item:active .tile{transform:translate(2px,2px)}}@media(prefers-reduced-motion:reduce){.tiles .tile,.tiles .tiles-item:before,.tiles .tile-img,.tiles .tile-zone:after{transition:none}.tiles .tiles-item:hover:before{transform:translate(var(--off),var(--off))}.tiles .tiles-item:hover .tile,.tiles .tile:active{transform:none}.tiles .tiles-item:hover .tile-img{translate:none}}@media(min-width:760px){.tiles .tiles-grid{--gap:clamp(16px, 2vw, 28px);--tw:calc((100cqi - 3 * var(--gap)) / 4);grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:var(--zone) auto auto}.tiles .tiles-item,.tiles .tiles-item:nth-child(n+3){grid-row:1 / span 3}.tiles .tiles-wrap{padding-bottom:12px}.tiles{padding-bottom:calc(var(--sec-pad) - 12px)}.tiles .tiles-note{position:absolute;top:3px;right:var(--gutter);margin:0}}@media(min-width:900px){.tiles{padding-top:calc(clamp(56px,4.5vw,72px) + 22px);padding-bottom:calc(clamp(56px,4.5vw,72px) - 12px)}.tiles .tiles-grid{--zr:.56;--r:18px;--off:4px}.tiles .tiles-head{display:flex;flex-direction:column}.tiles .tile:before{top:9px;right:9px;bottom:9px;left:9px}.tiles .tile-sub{font-size:14px;letter-spacing:.13em;margin-top:8px}.tiles .tile-row{padding-top:14px}}.tiles .tiles-item:before{box-shadow:none}.tiles .tile{box-shadow:none}.tiles .tile:before{display:none}.tiles .tiles-item:before{background:var(--btn-shadow)}.tiles .tile{transition:transform var(--btn-release) var(--btn-spring)}.tiles .tiles-item.is-pressed .tile{transform:translate(var(--off),var(--off));transition:transform var(--btn-press) ease-out}.tiles .tile-img{transition:translate var(--btn-release) var(--btn-spring)}.tiles .tiles-item.is-pressed .tile-img{translate:0 -7px;transition:translate .12s ease-out}@media(prefers-reduced-motion:reduce){.tiles .tiles-item.is-pressed .tile-img{translate:none}}.tiles .tiles-item:before{transform:translate(calc(var(--sx) * var(--off)),var(--off))}.tiles .tile:active,.tiles .tiles-item.is-pressed .tile{transform:translate(calc(var(--sx) * var(--off)),var(--off))}.tiles .tile:active .tile-arrow .pop-face{transform:translate(calc(var(--sx) * 2px),2px)}@media(hover:hover)and (pointer:fine){.tiles .tiles-item:hover:before{transform:translate(-5px,3px)}.tiles .tiles-item:hover .tile{transform:translate(3px,-5px)}.tiles .tiles-item:hover .tile-arrow .pop-face{transform:translate(3px,-3px) scale(1.04)}.tiles .tiles-item:active .tile{transform:translate(calc(var(--sx) * var(--off)),var(--off))}}@media(prefers-reduced-motion:reduce){.tiles .tiles-item:hover:before{transform:translate(calc(var(--sx) * var(--off)),var(--off))}}html .tiles .tiles-ph,html .tiles .tiles-note .placeholder-note{letter-spacing:.04em}html .tiles .tile-sub{letter-spacing:.16em}@media(min-width:900px){html .tiles .tile-sub{letter-spacing:.17em}}html .tiles .tiles-ph,html .tiles .tiles-note .placeholder-note{letter-spacing:.06em}.tiles .tile-sub,html .tiles .tile-sub{font:600 13.5px/1.35 var(--f-ui);letter-spacing:.01em;text-transform:none;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:normal}@media(min-width:900px){.tiles .tile-sub,html .tiles .tile-sub{font-size:15px}}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference){.tiles .tiles-item{--mx:0;--my:0}.tiles .tile{transition:transform .45s cubic-bezier(.2,.8,.2,1)}.tiles .tile-img{transition:translate .5s cubic-bezier(.2,.8,.2,1),rotate .5s cubic-bezier(.2,.8,.2,1),scale .5s cubic-bezier(.2,.8,.2,1)}.tiles .tiles-item:hover .tile{transform:perspective(1000px) translate(-3px,-6px) rotateX(calc(var(--my) * -3.5deg)) rotateY(calc(var(--mx) * 4.5deg))}.tiles .tiles-item:hover .tile-img{translate:calc(var(--mx) * 12px) calc(-12px + var(--my) * 8px);rotate:calc(var(--mx) * 3deg);scale:1.05}.tiles .tiles-item:hover .tile-img--bar{translate:calc(-3px + var(--mx) * 8px) calc(-12px + var(--my) * 6px);rotate:calc(var(--mx) * 2deg);scale:1.03}.tiles .tiles-item:hover .tile-img--wrap{translate:calc(var(--mx) * 16px) calc(-16px + var(--my) * 10px);rotate:calc(var(--mx) * 4deg);scale:1.06}.tiles .tiles-item.is-moving .tile,.tiles .tiles-item.is-moving .tile-img{transition-duration:.18s}}
/*# sourceMappingURL=/cdn/shop/t/15/assets/home-tiles.css.map */