.card{position:relative;display:flex;flex-direction:column;min-width:0;height:100%;border-radius:var(--radius-card);background-color:rgb(var(--color-surface));overflow:hidden}.card__media{position:relative;aspect-ratio:var(--card-image-ratio);background-color:rgb(var(--color-background));overflow:hidden}.card__media-link{display:block;height:100%}.card__image{width:100%;height:100%;object-fit:cover}.card__carousel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:none}.card__carousel-viewport{height:100%;overflow:hidden}.card__carousel-track{display:flex;height:100%;transition:transform var(--duration-base) var(--ease-primary)}.card__carousel-cell{flex:0 0 100%;min-width:0;overflow:hidden}.card__carousel-dots{position:absolute;inset-block-end:calc(var(--space-xs-sm) * -1);inset-inline-start:50%;display:flex;align-items:center;justify-content:center;margin:0;padding:0 var(--space-sm);border-radius:var(--radius-full);background-color:rgb(var(--color-surface));opacity:0;visibility:hidden;transform:translate(-50%,var(--space-2xs));transition:opacity var(--duration-base) var(--ease-primary),visibility var(--duration-base) var(--ease-primary),transform var(--duration-base) var(--ease-primary)}.card__carousel:hover .card__carousel-dots{opacity:1;visibility:visible;transform:translate(-50%)}.card__carousel-dot{display:flex;align-items:center;justify-content:center;width:var(--space-md);height:var(--space-md);padding:0;border:0;background:none;cursor:pointer}.card__carousel-dot:first-child{display:none}.card__carousel-dot:before{content:"";display:block;width:.3125rem;height:.3125rem;border-radius:var(--radius-full);background-color:rgb(var(--color-foreground));transition:background-color var(--duration-base) var(--ease-primary),box-shadow var(--duration-base) var(--ease-primary)}.card__carousel-dot.is-selected:before{background-color:transparent;box-shadow:0 0 0 2px rgb(var(--color-foreground))}@media(hover:hover)and (pointer:fine){.card__media-link{transition:transform var(--duration-base) var(--ease-primary)}.card:hover .card__media-link{transform:scale(1.05)}}@media(min-width:768px)and (hover:hover)and (pointer:fine){.card__carousel{display:block}.card__media--carousel{overflow:visible}.card__media-link--live .card__image--primary{opacity:0;visibility:hidden;pointer-events:none}.card:hover .card__media-link--live{transform:none}}.card--sold-out .card__image{opacity:.55}.card__badges{position:absolute;top:var(--space-xs);inset-inline-start:var(--space-xs);z-index:3;display:grid;justify-items:start;gap:var(--space-xs);pointer-events:none}@media(min-width:768px){.card__badges{top:var(--space-sm-md);inset-inline-start:var(--space-sm-md)}}.card__quick-view{position:absolute;z-index:3;top:var(--space-sm);inset-inline-end:var(--space-sm);display:flex;align-items:center;justify-content:center;width:var(--space-xl);height:var(--space-xl);padding:0;border:0;border-radius:var(--radius-button);background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));text-decoration:none}.card__quick-view:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid rgb(var(--color-foreground) / .1);border-radius:inherit;transition:border-color var(--duration-base) var(--ease-primary)}@media(hover:hover)and (pointer:fine){.card__quick-view{opacity:0;transition:opacity var(--duration-base) var(--ease-primary)}.card:hover .card__quick-view,.card__quick-view:focus-visible{opacity:1}@media(prefers-reduced-motion:reduce){.card__quick-view{opacity:1}}}.card__actions{position:absolute;z-index:3;inset-inline-end:var(--space-xs);bottom:var(--space-xs);display:flex}quick-add,quick-add form{display:block}.card__action{display:flex;align-items:center;justify-content:center;gap:var(--space-3xs);min-width:40px;min-height:40px;padding:0;border-radius:var(--radius-button);background-color:rgb(var(--color-foreground));color:rgb(var(--color-background));font-size:var(--text-2xs);font-weight:var(--font-body--weight-medium);line-height:var(--leading-tight);text-align:center;text-decoration:none;box-shadow:var(--shadow-sm);transition:background-color var(--duration-fast) var(--ease-smooth)}.card__action-label{display:none}@media(hover:hover)and (pointer:fine){.card__action:hover{background-color:rgb(var(--color-brand))}}quick-add[data-state=added] .card__action{background-color:rgb(var(--color-success))}quick-add[data-state=error] .card__action{background-color:rgb(var(--color-sale))}quick-add[data-state=adding] .card__action{cursor:progress}.card__action--sold-out{padding-inline:var(--space-sm);background-color:rgb(var(--color-background));color:rgb(var(--color-foreground));box-shadow:none;cursor:default}.card__action--sold-out .card__action-label{display:block}@media(min-width:768px){.card__actions{inset-inline:0;bottom:calc(var(--space-sm) + var(--space-xs));justify-content:center}.card__action{min-width:0;min-height:0;padding:var(--space-xs) var(--space-md);border-radius:var(--radius-button);font-size:var(--text-fluid-sm)}.card__action-label{display:block}.card__action-icon{display:none}}@media(min-width:768px)and (hover:hover)and (pointer:fine){.card__actions{opacity:0;transform:translateY(.5rem);transition:opacity var(--duration-base) var(--ease-primary),transform var(--duration-base) var(--ease-primary)}.card:hover .card__actions,.card:focus-within .card__actions{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.card__actions{opacity:1;transform:none}}}.card__content{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0;flex:1 1 auto;padding:clamp(var(--space-sm),1.263vw,var(--space-md)) clamp(var(--space-sm),2.105vw,calc(var(--space-lg) + var(--space-2xs))) clamp(var(--space-sm),2.105vw,calc(var(--space-lg) + var(--space-2xs)))}.card__vendor{align-self:flex-start;font-size:var(--text-3xs);line-height:var(--leading-tight);text-transform:uppercase;letter-spacing:.1em;color:rgb(var(--color-muted));text-decoration:none;background-image:linear-gradient(currentcolor,currentcolor);background-repeat:no-repeat;background-position:100% 100%;background-size:0 1px;transition:background-size var(--duration-base) var(--ease-primary)}@media(hover:hover){.card__vendor:hover{background-position:0 100%;background-size:100% 1px}}.card__details{display:flex;flex-direction:column;gap:var(--space-2xs);min-width:0}@media(min-width:1024px){.card__details{flex-direction:row;align-items:baseline;justify-content:space-between;gap:var(--space-2xs)}}.card__title{margin:0;font-family:var(--font-body--family);font-size:var(--text-fluid-lg);font-weight:var(--font-body--weight-medium);line-height:var(--leading-snug);letter-spacing:normal;text-transform:none;text-wrap:pretty;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@media(min-width:768px){.card__title{-webkit-line-clamp:2}}.card__link{text-decoration:none}@media(min-width:1024px){.card .price{flex:0 0 auto;flex-direction:column;align-items:flex-end;gap:var(--space-3xs-2xs);text-align:end}}.card__swatch-row{display:flex;align-items:center;gap:var(--space-2xs);min-width:0;margin-block-start:var(--space-2xs)}.card__swatches{display:flex;align-items:flex-start;gap:var(--space-2xs);margin:0;padding:0;list-style:none}.card__swatch{display:block;flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:var(--radius-swatch);background-color:var(--card-swatch, rgb(var(--color-muted) / .2));box-shadow:inset 0 0 0 1px var(--color-border-default)}.card__swatch--image{overflow:hidden}.card__swatch img{width:100%;height:100%;object-fit:cover}@media(min-width:768px){.card__swatch{width:2rem;height:2rem}}.card__spec-strip{position:relative;z-index:2;display:block;min-width:0;margin-block-start:auto;border-top:1px solid var(--color-border-subtle);background-color:rgb(var(--color-background))}.card__spec-strip:after{content:"";position:absolute;inset-block:0;inset-inline-end:0;width:var(--space-md);pointer-events:none;opacity:1;background:linear-gradient(to right,rgb(var(--color-background) / 0),rgb(var(--color-background)));transition:opacity var(--duration-fast) var(--ease-smooth)}.card__spec-strip[data-scroll-end]:after{opacity:0}.card__specs{display:flex;min-width:0;margin:0;padding:0;list-style:none;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.card__specs::-webkit-scrollbar{display:none}.card__spec{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3xs);min-width:40%;padding:var(--space-2xs) var(--space-xs);scroll-snap-align:start;text-align:center;line-height:var(--leading-snug)}@media(max-width:767px){.card__spec{min-width:60%}}@media(min-width:768px){.card__spec{flex-direction:row;align-items:center;justify-content:flex-start;text-align:start;padding-inline:var(--space-sm)}}.card__spec+.card__spec{border-inline-start:1px solid var(--color-border-subtle)}.card__spec-icon{flex:0 0 auto;color:rgb(var(--color-muted))}.card__spec-text{display:flex;flex-direction:column;min-width:0}.card__spec-value,.card__spec-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.card__spec-value{font-size:var(--text-xs);font-weight:var(--font-body--weight-medium);line-height:var(--leading-tight)}.card__spec-label{font-size:var(--text-3xs);line-height:var(--leading-snug);text-transform:uppercase;letter-spacing:.04em;color:rgb(var(--color-muted))}.card__specs:focus-visible{outline-offset:calc(var(--focus-ring-width) * -1)}.placeholder-image{display:grid;place-items:center;width:100%;height:100%;background-color:rgb(var(--color-surface))}.placeholder-image__svg{width:60%;height:auto;fill:rgb(var(--color-muted) / .4)}.card--placeholder .card__placeholder-line{display:block;height:.75em;border-radius:var(--radius-input);background-color:rgb(var(--color-muted) / .15)}.card--placeholder .card__placeholder-line--short{width:40%}
/*# sourceMappingURL=/cdn/shop/t/3/assets/component-product-card.css.map */