.tile{gap:var(--space-s);flex-direction:column;min-width:0;display:flex;position:relative;container:tile/inline-size}.tile__frame{aspect-ratio:4/5;transition:background-color var(--dur-medium) var(--ease-out);position:relative;overflow:hidden}.tile[data-size=s] .tile__frame{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);--on-plane:var(--ink);--on-plane-mute:var(--mute);background:0 0}.tile[data-size=s] .tile__img.img-white{mix-blend-mode:multiply}@media (hover:hover){.tile[data-size=s]:hover .tile__frame{background:var(--plane)}}.tile__no,.tile__tag{z-index:2;color:var(--on-plane-mute);position:absolute;top:14px}.tile__no{left:16px}.tile__tag{color:var(--on-plane);right:16px}.tile__tag[data-sale]{background:var(--signal);color:var(--ink);padding:3px 6px;top:11px}.tile__media{place-items:center;display:grid;position:absolute;inset:12% 8%}.tile__img{width:100%;height:100%;transition:transform var(--dur-long) var(--ease-out), opacity var(--dur-medium) var(--ease-out);grid-area:1/1}.tile[data-kind=photo] .tile__media{inset:10px}.tile[data-kind=photo] .tile__img{object-position:50% 25%}.tile__img--alt{opacity:0}.tile__sizes{z-index:2;background:var(--ink);color:var(--paper);transition:transform var(--dur-medium) var(--ease-out);flex-wrap:wrap;gap:4px 10px;padding:10px 16px;display:flex;position:absolute;inset:auto 0 0;transform:translateY(101%)}.tile__sizes span:first-child{color:#f1eee899;margin-right:4px}.tile__size{color:var(--stock-lit);align-items:center;gap:3px;display:inline-flex}.tile__sizes .tile__size .store-icon{width:9px;height:9px}@media (hover:hover){.tile:hover .tile__sizes,.tile:focus-within .tile__sizes{transform:none}.tile[data-kind=cutout]:hover .tile__img,.tile[data-kind=white]:hover .tile__img{transform:translateY(-4%)rotate(-4deg)scale(1.04)}.tile:has(.tile__img--alt):hover .tile__img{opacity:0}.tile:has(.tile__img--alt):hover .tile__img--alt{opacity:1}.tile[data-kind=photo]:not(:has(.tile__img--alt)):hover .tile__img{transform:scale(1.04)}}.tile__info{column-gap:var(--space-s);grid-template-columns:1fr auto;row-gap:2px;font-size:.925rem;line-height:1.3;display:grid}.tile__name{font-weight:620;font-size:inherit;line-height:inherit;grid-column:1}.tile__brand{font-family:var(--mono);font-weight:400;font-size:var(--fs-meta);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:4px;display:block}.tile__link:after{content:"";z-index:3;position:absolute;inset:0}.tile__link:focus-visible{outline:none}.tile__link:focus-visible:after{outline:2px solid var(--ink);outline-offset:4px}.tile__colorway{color:var(--mute);grid-column:1}.tile__price{text-align:right;grid-area:1/2/span 2;align-self:end;font-weight:620;display:grid}.tile__from{font-family:var(--mono);font-weight:400;font-size:var(--fs-meta);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}.tile__price s{font-size:.85em;font-weight:400}.tile__meta{justify-content:space-between;gap:4px var(--space-s);border-top:var(--rule-soft);flex-wrap:wrap;grid-column:1/-1;margin-top:8px;padding-top:8px;display:flex}.tile__meta .stock{white-space:nowrap}@container tile (width<=230px){.tile__info{grid-template-columns:1fr;font-size:.875rem}.tile__price{text-align:left;grid-area:auto/1;margin-top:4px;display:block}.tile__from{margin-right:4px}.tile__meta{flex-direction:column;align-items:flex-start}.tile__no,.tile__tag{top:10px}.tile__no{left:10px}.tile__tag{text-align:right;max-width:60%;right:10px}}.tile[data-size=xl] .tile__frame{aspect-ratio:auto;flex:1;min-height:min(118vw,640px)}.tile[data-size=xl] .tile__info{z-index:2;color:var(--on-plane);pointer-events:none;padding:20px 20px 22px;position:absolute;bottom:0;left:0;right:0}.tile[data-size=xl] .tile__link{pointer-events:auto}.tile[data-size=xl] .tile__name{letter-spacing:-.035em;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.6rem);font-weight:800;font-stretch:125%;line-height:.95}.tile[data-size=xl] .tile__brand{color:var(--on-plane-mute);margin-bottom:10px}.tile[data-size=xl] .tile__colorway{color:var(--on-plane-mute);margin-top:6px}.tile[data-size=xl] .tile__price{font-size:1.1rem}.tile[data-size=xl] .tile__meta{opacity:.9;border-top-color:currentColor}.tile[data-size=xl] .tile__meta .t-mute{color:inherit}.tile[data-size=xl] .tile__from{color:var(--on-plane-mute)}.tile[data-size=xl] .tile__media{inset:6% 9% 36%}.tile[data-size=xl][data-kind=photo] .tile__media{inset:12px 12px 34%}.tile[data-size=xl] .tile__sizes{display:none}.tile[data-size=xl][data-kind=cutout] .tile__img{transform:rotate(-7deg)}@media (hover:hover){.tile[data-size=xl][data-kind=cutout]:hover .tile__img{transform:rotate(-3deg)scale(1.05)translateY(-3%)}}