.card{--card-inset: 12px;--card-box-pad: 12px;--card-focus: var(--color-heading);position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:var(--card-spacing-mobile);min-inline-size:0;border-radius:var(--radius-media);color:var(--color-text);text-align:var(--card-text-align)}@media(min-width:768px){.card{--card-box-pad: 16px;row-gap:var(--card-spacing)}}.card--boxed{background:var(--color-surface)}.card__media{--card-media-inset: 8%;grid-area:1 / 1;position:relative;display:block;aspect-ratio:var(--card-media-ratio, var(--card-ratio, 1));overflow:hidden;border-radius:var(--radius-media);background:var(--card-media-bg, var(--color-surface))}.card__media--tile:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(var(--color-heading-rgb) / .1);pointer-events:none}.card__media--cutout{--card-media-bg: var(--color-subtle)}.card__media--cutout .card__img,.card__media--cutout .card__placeholder{inset:var(--card-media-inset);object-fit:var(--card-fit, contain)}.card__media--cutout .card__img{inline-size:auto;block-size:auto;max-inline-size:calc(100% - 2 * var(--card-media-inset));max-block-size:calc(100% - 2 * var(--card-media-inset));margin:auto;filter:var(--card-media-shadow, none)}.card--boxed .card__media{border-end-start-radius:0;border-end-end-radius:0}.card__img,.card__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;inline-size:100%;block-size:100%}.card__img{object-fit:var(--card-fit, cover)}.card__placeholder{fill:rgb(var(--color-text-rgb) / .35)}.card__img--hover{opacity:0}@media(hover:hover)and (pointer:fine){.card:not(.is-previewing,.has-variant):hover .card__media--hover .card__img--hover{opacity:1}.card:not(.is-previewing,.has-variant):hover .card__media--hover .card__img--main{opacity:0}}@media(hover:none),(pointer:coarse){.card__img--hover{display:none}}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference){.zoom-on .card:hover .card__img,.zoom-on .card:has(.card__link:focus-visible) .card__img{scale:var(--zoom-scale, 1.05)}}@media(prefers-reduced-motion:no-preference){.card__img{transition:opacity var(--dur) var(--ease),scale var(--dur-zoom, var(--dur-slow)) var(--ease-out)}.card__media--hover .card__img--main{transition:opacity 0s linear,scale var(--dur-zoom, var(--dur-slow)) var(--ease-out)}.card:not(.is-previewing,.has-variant):hover .card__media--hover .card__img--main{transition-delay:var(--dur),0s}}.badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px}.badges--card{position:absolute;z-index:1;inset-block-start:var(--card-inset);inset-inline-start:var(--card-inset);max-inline-size:calc(100% - 2 * var(--card-inset));pointer-events:none}.badges .badge{padding-block:4px;padding-inline:10px calc(10px - var(--badge-ls, 0em));line-height:var(--lh-normal);white-space:nowrap}.badges .badge--sold-out{--badge-bg: var(--badge-soldout-bg, var(--color-text));--badge-fg: var(--badge-soldout-text, var(--color-bg))}.badges .badge--sale{--badge-bg: var(--badge-sale-bg, var(--color-sale));--badge-fg: var(--badge-sale-text, var(--color-bg))}.badges .badge--collection-1{--badge-bg: var(--badge-collection-1-bg, var(--color-heading));--badge-fg: var(--badge-collection-1-text, var(--color-bg))}.badges .badge--collection-2{--badge-bg: var(--badge-collection-2-bg, var(--color-heading));--badge-fg: var(--badge-collection-2-text, var(--color-bg))}.badges .badge--collection-3{--badge-bg: var(--badge-collection-3-bg, var(--color-heading));--badge-fg: var(--badge-collection-3-text, var(--color-bg))}.badges .badge--custom{--badge-bg: var(--badge-custom-bg, var(--color-heading));--badge-fg: var(--badge-custom-text, var(--color-bg))}.card--ranked .card__media{container-type:inline-size}.card__rank{position:absolute;z-index:1;inset-block-start:.08em;inset-inline-end:.315em;font-family:var(--font-heading-family);font-weight:var(--font-heading-weight-bold, 700);font-style:italic;font-size:clamp(3.5rem,8.5vw,7.75rem);font-size:38cqi;line-height:1;letter-spacing:var(--ls-normal);color:rgb(var(--color-heading-rgb) / .08);pointer-events:none;-webkit-user-select:none;user-select:none}.card__actions,.card__view{grid-area:1 / 1;position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin:var(--card-inset);pointer-events:none}.card__actions{align-self:end;justify-content:center}.card__view{align-self:start;justify-self:end}.card__actions--icon{justify-content:flex-end}:is(.card__actions,.card__view)>*{pointer-events:auto}.card__form{display:flex;min-inline-size:0;margin:0}.card__actions--full .card__form,.card__actions--full>.card__action--add{flex:1 1 auto}.card__actions--full .card__form .card__action{flex:1 1 auto}.card .card__action{--icon-size: var(--btn-icon);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-inline-size:0;max-inline-size:100%;min-block-size:var(--btn-height);padding-block:0;padding-inline:1.5em;border:1px solid rgb(var(--color-text-rgb) / .07);border-radius:var(--radius-button);background:var(--color-bg);color:var(--color-heading);font-family:var(--button-family);font-weight:var(--button-weight);font-style:var(--button-style);font-size:var(--button-size);line-height:var(--lh-normal);letter-spacing:var(--button-ls);text-transform:var(--button-case);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}.card .card__action:before{content:"";position:absolute;inset:calc((var(--h-lg) - var(--h-md)) / -2)}.card .card__action--icon{inline-size:var(--h-lg);min-block-size:var(--h-lg);padding-inline:0;border-radius:50%}.card__action-label{overflow:hidden;text-overflow:ellipsis}.card .card__action:hover{background:var(--color-heading);border-color:var(--color-heading);color:var(--color-bg)}.card .card__action:focus-visible{outline:2px solid var(--card-focus);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.card .card__action{transition:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}}.card__action--text .card__action-icon,.card__action-done,.card__action-icon--done,.card__action.is-added .card__action-label,.card__action.is-added .card__action-icon--idle{display:none}.card__action.is-added .card__action-done{display:inline}.card__action.is-added .card__action-icon--done{display:block}.card__action[aria-busy=true]{cursor:progress}.card__action[aria-busy=true]>*{opacity:0}.card__action[aria-busy=true]:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inline-size:1.1em;block-size:1.1em;margin:auto;border:2px solid currentColor;border-inline-end-color:transparent;border-radius:50%}@media(prefers-reduced-motion:no-preference){.card__action[aria-busy=true]:after{animation:card-spin var(--dur-slow) linear infinite}}@keyframes card-spin{to{transform:rotate(1turn)}}@media(hover:hover)and (pointer:fine)and (min-width:768px){.card__actions,.card__view{opacity:0}.card:hover :is(.card__actions,.card__view),.card:focus-within :is(.card__actions,.card__view),.card.is-busy :is(.card__actions,.card__view){opacity:1}}@media(hover:hover)and (pointer:fine)and (min-width:768px)and (prefers-reduced-motion:no-preference){.card__actions,.card__view{transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}.card__actions{transform:translateY(10px)}.card__view{transform:translate(10px)}.card:hover :is(.card__actions,.card__view),.card:focus-within :is(.card__actions,.card__view),.card.is-busy :is(.card__actions,.card__view){transform:none}}@media(max-width:767px){.card .card__action--desktop{display:none}.card .card__action{min-block-size:var(--h-md)}.card .card__action--icon{inline-size:var(--h-md);min-block-size:var(--h-md)}.card__actions--compact-mobile{justify-content:flex-end}.card__actions--compact-mobile :is(.card__form,.card__action--add){flex:0 0 auto}.card__actions--compact-mobile .card__action--add{inline-size:var(--h-md);padding-inline:0;border-radius:50%}.card__actions--compact-mobile .card__action--add :is(.card__action-label,.card__action-done){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.card__actions--compact-mobile .card__action--add:not(.is-added) .card__action-icon--idle{display:block}}@media(min-width:768px){.card .card__action--mobile{display:none}}.no-js .card .card__action--js{display:none}.card__content{grid-area:2 / 1;display:flex;flex-direction:column;gap:var(--card-content-gap-mobile);min-inline-size:0}.card__info{display:flex;flex-direction:column;gap:var(--card-info-gap-mobile);min-inline-size:0}@media(min-width:768px){.card__content{gap:var(--card-content-gap)}.card__info{gap:var(--card-info-gap)}}.card--boxed .card__content{padding-inline:var(--card-box-pad);padding-block-end:var(--card-box-pad)}.card__vendor,.card__type{margin:0;font-size:var(--fs-xs);line-height:var(--lh-normal);color:var(--color-text-muted)}.card__title{margin:0;font-family:var(--card-title-family);font-weight:var(--card-title-weight);font-style:var(--card-title-style);font-size:var(--card-title-size);line-height:var(--card-title-lh, var(--lh-loose));letter-spacing:var(--card-title-ls, var(--ls-normal));text-transform:var(--card-title-case, none);color:var(--color-heading);overflow-wrap:anywhere}.card__title--clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--card-title-lines);overflow:hidden}.card__link{color:inherit;text-decoration:none}.card__link:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit}.card__link:focus-visible{outline:2px solid var(--card-focus);outline-offset:2px}@supports selector(:has(*)){.card__link:focus-visible{outline:none}.card:has(.card__link:focus-visible){outline:2px solid var(--card-focus);outline-offset:4px}}.card__message{margin:0;font-size:var(--fs-xs);line-height:var(--lh-relaxed);color:var(--color-heading)}.card__message:empty{display:none}.price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.5em;row-gap:2px;margin:0;color:var(--color-heading);font-variant-numeric:tabular-nums}.price--card{justify-content:var(--card-justify, flex-start);font-family:var(--card-price-family);font-weight:var(--card-price-weight);font-style:var(--card-price-style);font-size:var(--card-price-size);line-height:var(--lh-normal)}.price--pdp{font-size:var(--fs-xl);line-height:var(--lh-normal)}.price--sale .price__current{color:var(--color-sale)}.price__compare{color:var(--color-text-muted);font-size:var(--fs-sm);text-decoration-line:line-through}.price--pdp .price__compare{font-size:var(--fs-md)}.price__from{font-size:var(--fs-xs);font-weight:var(--font-body-weight);color:var(--color-text-muted)}.price__unit{flex-basis:100%;font-size:var(--fs-xs);color:var(--color-text-muted)}.swatches{--sw: var(--card-swatch-w-mobile);display:flex;flex-wrap:wrap;align-items:center;gap:var(--card-swatch-gap);justify-content:var(--card-justify, flex-start)}@media(min-width:768px){.swatches{--sw: var(--card-swatch-w)}}.swatch{position:relative;z-index:2;flex:none;inline-size:var(--sw);block-size:var(--sw);padding:0;border:0;border-radius:var(--radius-swatch);background:none;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.swatch:before{content:"";position:absolute;inset-block:calc((var(--h-lg) - var(--sw)) / -2);inset-inline:min(calc(var(--card-swatch-gap) / -2),calc((24px - var(--sw)) / -2))}.swatch__fill{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;border-radius:inherit;background-color:var(--color-surface);background-image:var(--swatch-image, none);background-position:center;background-size:cover}.swatch__fill:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(var(--swatch-color),var(--swatch-color))}.swatch__fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(var(--color-text-rgb) / .15)}.swatch--unavailable .swatch__fill{opacity:.5}.swatch--unavailable .swatch__fill:after{background-image:linear-gradient(to top right,transparent calc(50% - .75px),var(--color-text) calc(50% - .75px),var(--color-text) calc(50% + .75px),transparent calc(50% + .75px))}:is(.has-variant,.card--variant-shown) .swatches--border .swatch[aria-checked=true]{outline:1px solid var(--color-heading);outline-offset:2px}.swatches--underline .swatch:after{content:"";position:absolute;inset-inline:0;inset-block-end:-5px;block-size:2px;background:var(--color-heading);transform:scaleX(0)}:is(.has-variant,.card--variant-shown) .swatches--underline .swatch[aria-checked=true]:after{transform:none}@media(hover:hover)and (pointer:fine){.swatches--border .swatch:hover{outline:1px solid rgb(var(--color-heading-rgb) / .35);outline-offset:2px}.swatches--underline .swatch:hover:after{transform:scaleX(.5)}}.swatches .swatch:focus-visible{outline:2px solid var(--card-focus);outline-offset:2px}@media(prefers-reduced-motion:no-preference){.swatches--underline .swatch:after{transition:transform var(--dur-fast) var(--ease)}}.swatches__more{position:relative;z-index:2;display:inline-flex;align-items:center;min-block-size:var(--sw);font-size:var(--fs-xs);line-height:var(--lh-tight);color:var(--color-text-muted);text-decoration:none;font-variant-numeric:tabular-nums}.swatches__more:before{content:"";position:absolute;inset-block:calc((var(--h-lg) - var(--sw)) / -2);inset-inline:-6px}.swatches__more:hover{color:var(--color-heading);text-decoration:underline;text-underline-offset:.2em}.swatches__more:focus-visible{outline:2px solid var(--card-focus);outline-offset:2px}@media(forced-colors:active){.badges .badge,.card .card__action{border:1px solid CanvasText}.swatches--border .swatch[aria-checked=true]{outline-color:Highlight}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/card.css.map */