/* Favourites hearts, the header favourites link and product cards
   (recently viewed row, favourites page). See js/gf-saved.js. */

.gf-heart { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.12); color: #0c193a; flex: none; }
.gf-heart svg { fill: none; stroke: currentColor; stroke-width: 1.8; transition: fill .15s; }
.gf-heart:hover svg { fill: rgba(204,76,80,.15); }
.gf-heart[aria-pressed="true"] { color: #cc4c50; }
.gf-heart[aria-pressed="true"] svg { fill: #cc4c50; }
.gf-heart { position: relative; }

/* Added to favourites: squash-and-stretch bounce, a ring and a burst of
   little hearts / confetti (built by celebrate() in js/gf-saved.js). */
.gf-heart.gf-pop svg { animation: gf-pop .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes gf-pop {
	0% { transform: scale(1); }
	15% { transform: scale(.7, .8); }
	40% { transform: scale(1.45); }
	60% { transform: scale(.92); }
	80% { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.gf-heart.gf-unpop svg { animation: gf-unpop .25s ease; }
@keyframes gf-unpop { 50% { transform: scale(.8); } }
.gf-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 3; }
.gf-burst-ring { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid #cc4c50; box-sizing: border-box; animation: gf-ring .6s ease-out forwards; }
@keyframes gf-ring {
	0% { transform: scale(.5); opacity: .9; border-width: 6px; }
	100% { transform: scale(1.9); opacity: 0; border-width: 1px; }
}
.gf-burst-p { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0; animation: gf-fly .75s cubic-bezier(.15,.7,.4,1) .05s forwards; }
.gf-burst-p.gf-burst-heart { left: -6px; top: -8px; width: 12px; height: 16px; background: none; font-size: 13px; line-height: 16px; text-align: center; }
@keyframes gf-fly {
	0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.4); }
	60% { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(1); }
}

/* Header count bumps when something is added */
.gf-fav-count.gf-bump { animation: gf-bump .5s cubic-bezier(.2,.9,.3,1.4); }
@keyframes gf-bump { 30% { transform: scale(1.5); background: #e0565b; } 100% { transform: scale(1); } }

/* "Saved to favourites" toast */
.gf-toast { position: fixed; left: 50%; bottom: 24px; z-index: 10000; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 24px; background: #0c193a; color: #fff; font-size: 14px; line-height: 1.3; box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; transform: translate(-50%, 20px); transition: opacity .25s, transform .3s cubic-bezier(.2,.9,.3,1.3); pointer-events: none; white-space: nowrap; }
.gf-toast.gf-toast-show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.gf-toast a { color: #fff; font-weight: 700; text-decoration: underline; margin-left: 4px; }
.gf-toast-heart { color: #f08a8d; font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
	.gf-heart.gf-pop svg, .gf-heart.gf-unpop svg, .gf-fav-count.gf-bump { animation: none; }
	.gf-toast { transition: opacity .2s; transform: translate(-50%, 0); }
}

/* On the product page, next to the title */
.gf-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gf-title-row h1 { flex: 1; min-width: 0; letter-spacing: -1px; }
.gf-heart-title { margin-top: 4px; box-shadow: none; border: 1px solid #ddd; }

/* On product listing cards (image containers are position: relative) */
.productdetailssmimg { position: relative; }
.gf-heart-card { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* Header favourites link */
.gf-fav-nav { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #3d3d3d; text-decoration: none; float: right; margin: 6px 0 0 10px; }
.gf-fav-nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.gf-fav-nav:hover { color: #cc4c50; }
.gf-fav-count { position: absolute; top: 3px; right: 1px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; background: #cc4c50; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
div#searchform { width: calc(70% - 56px); }
@media only screen and (max-width: 800px) {
	.gf-fav-nav { float: none; margin: 0; order: 3; }
	.mobilesearchtoggle { order: 4; }
	div#searchform { width: 100%; }
}

/* Product cards */
.gf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; }
.gf-cards.gf-cards-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(170px, 210px); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.gf-card { position: relative; min-width: 0; scroll-snap-align: start; }
.gf-card-img { display: block; aspect-ratio: 1 / 1; background: #f1efef; overflow: hidden; }
.gf-card-img img { width: 100%; height: 100%; object-fit: contain; display: block; mix-blend-mode: multiply; }
.gf-card .gf-heart-card { top: 8px; right: 8px; }
.gf-card-name { display: block; margin: 8px 0 4px; color: #333; font-size: 14px; line-height: 1.35; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gf-card-name:hover { text-decoration: underline; }
.gf-card-price { font-weight: 700; font-size: 15px; color: #222; }
.gf-card-was { font-weight: 400; color: #999; text-decoration: line-through; font-size: 13px; }
.gf-card-merchant { font-size: 12px; color: #888; margin-top: 2px; }

.gf-recent-section { padding: 10px 0 30px; }
.gf-recent-section .main-sub-headings { display: flex; align-items: baseline; justify-content: space-between; }
.gf-link-btn { background: none; border: 0; padding: 0; color: #666; text-decoration: underline; cursor: pointer; font-size: 13px; }

/* Favourites page */
.gf-fav-page { padding: 20px 0 40px; }
.gf-fav-page h1 { font-size: 26px; margin: 0 0 4px; }
.gf-fav-page .gf-fav-sub { color: #666; margin: 0 0 20px; }
.gf-fav-empty { padding: 40px 0; text-align: center; color: #666; }
.gf-fav-empty svg { width: 48px; height: 48px; fill: none; stroke: #cc4c50; stroke-width: 1.5; }
@media only screen and (max-width: 800px) {
	.gf-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.gf-fav-page { padding: 15px; }
}