:root{--timing-entrance: cubic-bezier(.16, 1, .3, 1);--timing-exit: cubic-bezier(.4, 0, 1, 1);--timing-transform: cubic-bezier(.34, 1.56, .64, 1);--timing-opacity: cubic-bezier(.25, 0, .25, 1);--timing-scale: cubic-bezier(.68, -.55, .265, 1.55);--timing-filter: cubic-bezier(.23, 1, .32, 1)}.card{background:hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l));border:1px solid hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l));border-radius:var(--radius-lg);overflow:hidden;transition:transform .15s var(--timing-entrance),filter .2s var(--timing-filter);will-change:transform,filter;position:relative;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);filter:drop-shadow(0 1px 4px hsla(var(--color-primary-h),15%,15%,.03))}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-animated);background-size:400% 400%;opacity:0;transition:opacity .12s var(--timing-opacity);animation:animatedGradient 12s ease-in-out infinite;z-index:1}.card:hover:before{opacity:.03}.card:hover{transform:translate3d(0,-2px,0);filter:drop-shadow(0 6px 20px hsla(var(--color-primary-h),15%,15%,.06)) brightness(1.02)}.card__inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column}.card-product{background:hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l));border:1px solid hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l));border-radius:var(--radius-xl);overflow:hidden;transition:transform .15s var(--timing-entrance),filter .2s var(--timing-filter);will-change:transform,filter;position:relative;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);filter:drop-shadow(0 2px 8px hsla(var(--color-primary-h),20%,20%,.04));group:hover}.card-product:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,hsla(var(--color-surface-h),var(--color-surface-s),var(--color-surface-l),.3),hsla(var(--color-surface-elevated-h),var(--color-surface-elevated-s),var(--color-surface-elevated-l),.2));opacity:0;transition:opacity .12s var(--timing-opacity);z-index:1;pointer-events:none}.card-product:hover:after{opacity:.3}.card-product:hover{transform:translate3d(0,-2px,0);filter:drop-shadow(0 8px 24px hsla(var(--color-primary-h),20%,20%,.08)) brightness(1.03) saturate(1.05)}.card-product__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:linear-gradient(135deg,hsl(var(--color-surface-h),var(--color-surface-s),var(--color-surface-l)),hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l)));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.card-product__media img{width:100%;height:100%;object-fit:cover;transition:transform .25s var(--timing-transform);will-change:transform}.card-product:hover .card-product__media img{transform:scale3d(1.1,1.1,1)}.card-product__media-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 0%,hsla(0,0%,0%,.3) 100%);opacity:0;transition:opacity .12s var(--timing-opacity);display:flex;align-items:flex-end;justify-content:flex-end;padding:var(--space-3);z-index:3}.card-product:hover .card-product__media-overlay{opacity:1}.card-product__quick-actions{display:flex;gap:var(--space-2);opacity:0;transform:translate3d(0,.5rem,0);transition:transform .15s var(--timing-entrance),opacity .12s var(--timing-opacity);will-change:transform,opacity}.card-product:hover .card-product__quick-actions{opacity:1;transform:translateZ(0)}.card-product__quick-btn{width:2.5rem;height:2.5rem;border-radius:50%;background:hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l));border:1px solid hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l));display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s var(--timing-scale),background-color .15s var(--timing-entrance),color .1s var(--timing-opacity),filter .18s var(--timing-filter);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);filter:drop-shadow(0 2px 8px hsla(var(--color-primary-h),20%,20%,.08));color:hsl(var(--color-text-h),var(--color-text-s),var(--color-text-l));will-change:transform,background-color,filter}.card-product__quick-btn:hover{background:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l));color:hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l));transform:scale3d(1.05,1.05,1);filter:drop-shadow(0 4px 12px hsla(var(--color-primary-h),40%,40%,.15));border-color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}.card-product__badge{position:absolute;top:var(--space-4);left:var(--space-4);z-index:4}.card-product__content{padding:var(--space-3);flex:1;display:flex;flex-direction:column;position:relative;z-index:2;text-align:center;align-items:center}.card-product__vendor{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:hsl(var(--color-text-muted-h),var(--color-text-muted-s),var(--color-text-muted-l));text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);margin-bottom:var(--space-1)}.card-product__title{font-family:var(--font-heading);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);color:hsl(var(--color-text-h),var(--color-text-s),var(--color-text-l));line-height:var(--line-height-tight);margin-bottom:var(--space-2);text-decoration:none;transition:color .1s var(--timing-opacity),transform .12s var(--timing-entrance)}.card-product__title:hover{color:hsl(var(--color-primary-hover-h),var(--color-primary-hover-s),var(--color-primary-hover-l));transform:translate3d(2px,0,0)}.card-product__description{font-size:var(--font-size-base);color:hsl(var(--color-text-muted-h),var(--color-text-muted-s),var(--color-text-muted-l));line-height:var(--line-height-base);margin-bottom:var(--space-3);flex:1}.card-product__price-wrapper{display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-3);width:100%}.card-product__price{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}.card-product__price--compare{font-size:var(--font-size-sm);font-weight:var(--font-weight-light);color:hsl(var(--color-text-muted-h),var(--color-text-muted-s),var(--color-text-muted-l));text-decoration:line-through;margin-left:var(--space-3);opacity:.7}.card-product__rating{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:hsl(var(--color-text-muted-h),var(--color-text-muted-s),var(--color-text-muted-l));margin-bottom:var(--space-3);opacity:.9}.card-product__rating-stars{color:#eea62b;font-size:.9em;letter-spacing:.05em}.card-product__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2);justify-content:center;width:100%}.card-product__add-to-cart{flex:1;min-height:4rem;background:var(--gradient-primary);color:hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l));border:none;border-radius:var(--radius-lg);font-weight:var(--font-weight-medium);cursor:pointer;transition:transform .15s var(--timing-entrance),background .18s var(--timing-filter),color .1s var(--timing-opacity),border-color .12s var(--timing-opacity);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);font-size:var(--font-size-sm);will-change:transform,background,filter}.card-product__add-to-cart:hover{background:var(--gradient-accent);transform:translate3d(0,-2px,0);filter:drop-shadow(0 8px 16px hsla(var(--color-primary-h),30%,30%,.15)) brightness(1.05)}.card-product__wishlist{width:4rem;height:4rem;background:var(--gradient-elevated);border:1px solid hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s var(--timing-entrance),background .18s var(--timing-filter),color .1s var(--timing-opacity),border-color .12s var(--timing-opacity);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);will-change:transform,background,border-color}.card-product__wishlist:hover{background:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l));color:hsl(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l));border-color:transparent;transform:translate3d(0,-2px,0)}.card-collection{background:var(--gradient-elevated);border:1px solid hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l));border-radius:var(--radius-2xl);overflow:hidden;transition:transform .15s var(--timing-entrance),background .18s var(--timing-filter),color .1s var(--timing-opacity),border-color .12s var(--timing-opacity);will-change:transform;position:relative;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--elevation-2);min-height:32rem}.card-collection:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gradient-animated);background-size:400% 400%;opacity:0;transition:opacity .12s var(--timing-opacity);animation:animatedGradient 15s ease-in-out infinite;z-index:1}.card-collection:hover:before{opacity:.05}.card-collection:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--elevation-5);border-color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}.card-collection__media{position:relative;height:60%;overflow:hidden;background:var(--gradient-surface)}.card-collection__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--transition)}.card-collection:hover .card-collection__media img{transform:scale(1.1)}.card-collection__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.7) 100%);display:flex;align-items:flex-end;padding:var(--space-4);z-index:3}.card-collection__content{padding:var(--space-4);height:40%;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}.card-collection__title{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:hsl(var(--color-text-h),var(--color-text-s),var(--color-text-l));line-height:var(--line-height-tight);margin-bottom:var(--space-2);text-decoration:none;transition:color .1s var(--timing-opacity),transform .12s var(--timing-entrance)}.card-collection__title:hover{color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}.card-collection__description{font-size:var(--font-size-base);color:hsl(var(--color-text-muted-h),var(--color-text-muted-s),var(--color-text-muted-l));line-height:var(--line-height-base);margin-bottom:var(--space-3)}.card-collection__count{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l));text-transform:uppercase;letter-spacing:var(--letter-spacing-wide)}.card--glass{background:hsla(var(--color-surface-h),var(--color-surface-s),var(--color-surface-l),.8);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);border:1px solid hsl(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l))}.card--minimal{background:transparent;border:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}.card--elevated{box-shadow:var(--elevation-3)}.card--elevated:hover{box-shadow:var(--elevation-5)}.card--rounded{border-radius:var(--radius-2xl)}.card--square{border-radius:var(--radius-md)}@media (hover: none) and (pointer: coarse){.card:hover,.card-product:hover{transform:none;filter:none}.card:hover:before,.card-product:hover:after{opacity:0}.card-product:hover .card-product__media img{transform:none}.card-product:hover .card-product__media-overlay{opacity:0}.card-product:hover .card-product__quick-actions{opacity:0;transform:translate3d(0,.5rem,0)}.card:active,.card-product:active{transform:translate3d(0,-1px,0);filter:brightness(1.01);transition:transform .1s var(--timing-entrance)}}@media (prefers-reduced-motion: reduce){.card,.card-product,.card-product__media img,.card-product__quick-actions,.card-product__quick-btn,.card-product__title{transition:none;animation:none;will-change:auto}.card:before,.card-product:after{animation:none}}@media (max-width: 768px){.card,.card-product{transition:transform .1s var(--timing-entrance);will-change:transform}.card:hover,.card-product:hover{transform:translate3d(0,-1px,0)}.card-product__quick-btn{transition:background-color .1s var(--timing-entrance),color .1s var(--timing-opacity);filter:none}.card-product__quick-btn:hover{filter:none}.card-product__content{padding:var(--space-3) var(--space-3) var(--space-2)}.card-product__title{font-size:var(--font-size-sm);line-height:1.3;margin-bottom:var(--space-2)}.card-product__vendor{font-size:.7rem;margin-bottom:var(--space-1)}.card-product__description{font-size:.8rem;line-height:1.4;margin-bottom:var(--space-3)}.card-product__price{font-size:var(--font-size-base)}.card-product__actions{flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}.card-product__add-to-cart{min-height:2.5rem;font-size:.8rem}.card-product__wishlist{width:100%;height:2.5rem}.card-product__badge{top:var(--space-2);left:var(--space-2)}.card-collection{min-height:28rem}.card-collection__title{font-size:var(--font-size-base)}}@media (min-width: 769px) and (max-width: 1024px){.card,.card-product{transition:transform .12s var(--timing-entrance),filter .15s var(--timing-filter)}.card-product__media img{transition:transform .2s var(--timing-transform)}.card-product__quick-actions{transition:transform .12s var(--timing-entrance),opacity .1s var(--timing-opacity)}}@media (min-width: 1025px){.card,.card-product{transition:transform .15s var(--timing-entrance),filter .2s var(--timing-filter)}.card-product__media img{transition:transform .25s var(--timing-transform)}.card-product__quick-actions{transition:transform .15s var(--timing-entrance),opacity .12s var(--timing-opacity)}.card:hover,.card-product:hover{transform:translate3d(0,-2px,0)}.card-product:hover .card-product__media img{transform:scale3d(1.1,1.1,1)}}@media (min-width: 1440px) and (min-resolution: 2dppx){.card:before,.card-product:after{transition:opacity .12s var(--timing-opacity)}.card-product__quick-btn{transition:transform .12s var(--timing-scale),background-color .15s var(--timing-entrance),color .1s var(--timing-opacity),filter .18s var(--timing-filter)}}@supports not (filter: drop-shadow(0 0 0 transparent)){.card,.card-product{box-shadow:0 2px 8px hsla(var(--color-primary-h),20%,20%,.04);transition:transform .15s var(--timing-entrance),box-shadow .2s var(--timing-filter)}.card:hover,.card-product:hover{box-shadow:0 8px 24px hsla(var(--color-primary-h),20%,20%,.08)}.card-product__quick-btn{box-shadow:0 2px 8px hsla(var(--color-primary-h),20%,20%,.08)}.card-product__quick-btn:hover{box-shadow:0 4px 12px hsla(var(--color-primary-h),40%,40%,.15)}}@supports not (will-change: transform){.card,.card-product,.card-product__media img,.card-product__quick-actions,.card-product__quick-btn{transform:translateZ(0)}}@media (prefers-reduced-data: reduce){.card:before,.card-product:after{background:none;animation:none}.card-product__media img{transition:none}}.card--animate-in{opacity:0;transform:translateY(1rem);animation:cardSlideIn .5s cubic-bezier(.4,0,.2,1) forwards}.card--animate-in--delay-1{animation-delay:.1s}.card--animate-in--delay-2{animation-delay:.2s}.card--animate-in--delay-3{animation-delay:.3s}.card--animate-in--delay-4{animation-delay:.4s}@keyframes cardSlideIn{to{opacity:1;transform:translateY(0)}}.card--pulse{animation:cardPulse 2s ease-in-out infinite}@keyframes cardPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.card--loading{pointer-events:none}.card--loading .card-product__media{background:linear-gradient(90deg,hsl(var(--color-surface-h),var(--color-surface-s),92%) 25%,hsl(var(--color-surface-h),var(--color-surface-s),98%),hsl(var(--color-surface-h),var(--color-surface-s),92%) 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite linear}.card--loading .card-product__title,.card--loading .card-product__description,.card--loading .card-product__price{background:linear-gradient(90deg,hsl(var(--color-surface-h),var(--color-surface-s),92%) 25%,hsl(var(--color-surface-h),var(--color-surface-s),98%),hsl(var(--color-surface-h),var(--color-surface-s),92%) 75%);background-size:200% 100%;animation:skeleton-loading 1.2s infinite linear;color:transparent;border-radius:var(--radius-sm)}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}
/*# sourceMappingURL=/cdn/shop/t/14/assets/component-card.css.map */