/* Saved sets (auramani-saved): the heart on cards and on the product page, the way to the list in
   the header, the sign-in popup, and the list in My account. Colours and sizes are the theme's tokens. */

/* ---- the heart ---- */
.au-heart{background:var(--surface);border:1px solid var(--border);color:var(--ink);cursor:pointer;transition:background var(--duration),border-color var(--duration),color var(--duration)}
.au-heart:hover{background:var(--blush)}
.au-heart .au-icon{transform:none;transition:transform var(--duration)}
.au-heart.is-saved{border-color:var(--primary);color:var(--primary)}
.au-heart.is-saved .au-icon{fill:currentColor}
.au-heart:active .au-icon{transform:scale(.86)}

.au-product-card{position:relative}
.au-heart--card{position:absolute;top:12px;right:12px;z-index:1;width:40px;height:40px;min-width:40px}

/* Product page. "Add to bag" keeps its width: the heart is a button under the row ("Save for later"),
   and moves next to "Add to bag" only where the row itself has room for both. The row's own width
   decides, not the screen's: the column is narrow on phones and narrow again on tablets. */
.au-buy-box{container-type:inline-size}
.au-heart--page{grid-column:1/-1;width:100%;height:44px;min-width:0;border-radius:var(--radius-button);border-color:var(--control);gap:var(--space-2);font:inherit;font-size:var(--text-md);font-weight:600}
.au-heart--page .au-icon{width:20px;height:20px}
.au-heart-text::after{content:attr(data-save)}
.is-saved .au-heart-text::after{content:attr(data-saved)}
@container (min-width:380px){
	.au-buy-row:has(.au-heart--page){grid-template-columns:auto 1fr auto}
	.au-heart--page{grid-column:auto;width:48px;height:48px;min-width:48px;border-radius:50%}
	.au-heart--page .au-icon{width:24px;height:24px}
	.au-heart-text{display:none}
}

/* ---- header: the way to the list, with the number of saved sets ---- */
.au-saved-link .au-icon{transform:none}
.au-saved-count{position:absolute;right:1px;top:1px;background:var(--primary);color:#fff;min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;font-size:var(--text-micro)}
.au-saved-count[hidden]{display:none}

/* ---- the popup ---- */
.au-saved-pop{display:grid;gap:var(--space-4)}
.au-saved-pop-set{display:flex;align-items:center;gap:var(--space-3);margin-top:calc(var(--space-2) * -1)}
.au-saved-pop-set img{width:56px;height:56px;border-radius:var(--radius-control);object-fit:cover;background:var(--blush);flex:none}
.au-saved-pop-set p{margin:0;color:var(--muted);font-size:var(--text-md);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.au-saved-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-1);padding:var(--space-1);border-radius:var(--radius-pill);background:var(--disabled-bg)}
.au-saved-tabs button{min-height:44px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);font:inherit;font-size:var(--text-md);cursor:pointer}
.au-saved-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600}
.au-saved-pop form{display:grid;gap:var(--space-3)}
.au-saved-pop form[hidden]{display:none}
.au-saved-note{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--muted)}
.au-saved-note a{color:var(--ink);text-decoration:underline}
.au-saved-privacy p{margin:0}
dialog:has(.au-saved-pop){width:min(440px,calc(100% - 32px))}

/* ---- My account → Saved sets ---- */
.au-saved-item{min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.au-saved-item .au-product-card{flex:1}
.au-saved-item .au-btn{width:100%}
.au-saved-empty .au-icon{transform:none;width:32px;height:32px}

@media(max-width:767px){
	.au-heart--card{top:8px;right:8px;width:36px;height:36px;min-width:36px}
	.au-heart--card .au-icon{width:18px;height:18px}
	.au-header-tools .au-saved-link{display:none}
}