.page-card{position:relative;display:flex;align-items:center;gap:1.6rem;width:100%;height:100%;min-height:7.2rem;padding:1.2rem 1.2rem 1.2rem 2.4rem;border-radius:min(var(--border-radius-product),2.4rem);background-color:rgb(var(--color-background-secondary));overflow:hidden}.page-card__overlay-link{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;display:block;border-radius:var(--border-radius-button);width:100%;height:100%}.page-card__title{flex-grow:1;margin:0;padding:1.2rem 0;color:rgb(var(--color-foreground))}.page-card__icon-button{flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;width:4.8rem;height:4.8rem;border-radius:var(--border-radius-button);border:.1rem solid rgba(var(--secondary-button-color-border),.2);color:rgb(var(--secondary-button-color-label));transition:background-color var(--duration-default) ease-in-out,border-color var(--duration-default) ease-in-out}.page-card__icon-button:before{content:"";position:absolute;top:50%;left:50%;width:100%;aspect-ratio:1;border-radius:var(--border-radius-button);background-color:rgb(var(--secondary-button-color-bg-hover));opacity:.5;transform:translate(-50%,-50%) scale(0);transition:transform var(--duration-default) ease-in-out,opacity var(--duration-default);pointer-events:none;z-index:0}.page-card__icon-button .button-back-icon,.page-card__icon-button .button-back-icon__icon-wrapper,.page-card__icon-button .button-back-icon .icon-button-arrow{width:2.4rem;height:2.4rem}.page-card__icon-button .button-back-icon{z-index:1;color:rgb(var(--secondary-button-color-label));transition:color var(--duration-default) ease-in-out}@media(hover:hover){.page-card__title{transition:opacity var(--duration-default) ease-in-out}.page-card:hover .page-card__icon-button{border-color:rgb(var(--secondary-button-color-border-hover));background-color:rgba(var(--secondary-button-color-bg-hover),.3)}.page-card:hover .page-card__icon-button:before{transform:translate(-50%,-50%) scale(1.2);opacity:1}.page-card:hover .page-card__icon-button .button-back-icon{color:rgb(var(--secondary-button-color-label-hover))}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/component-page-card.css.map */
