/* Saved Printables: hearts, header link, list page. See includes/saved.php. */

/* ---------- Hearts ---------- */

.litm-save { cursor: pointer; font: inherit; color: #6B3FA8; }
.litm-save svg { display: block; width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; overflow: visible; }
.litm-save.is-saved svg { fill: currentColor; }
.litm-save:focus-visible { outline: 3px solid #2AAFBC; outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
	.litm-save.is-saved svg { animation: litm-save-pop .25s ease-out; }
	@keyframes litm-save-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
}

/* On the photo: bottom left is plain wood on every main photo (the title sits at the top, Katie's logo bottom right,
   the Sale badge top right). Shop photos are 4:3 and a percentage margin is a share of the card's width, so this lands
   just above the photo's bottom edge, the same way the New label does. */
.products li.product { position: relative; }
.litm-save.litm-save--card { position: absolute; top: 0; left: 8px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: calc(75% - 44px) 0 0; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(27, 42, 65, .25); }
.litm-save.litm-save--card:hover { color: #8E2DE2; }
.litm-saved-ready li.product .litm-new:not(.litm-new--page) { left: 50px; }

/* The homepage row sits in page content, where WordPress adds stray line breaks above each photo. Without them the
   photo starts at the top of the card, which is where the heart's position counts from. */
body.home .home-shop ul.products li.product > a > br,
body.home .home-shop ul.products li.product > a > p:empty { display: none; }

/* Cards with padding around the photo: the homepage row and the list page. */
body.home .home-shop ul.products li.product > .litm-save--card,
.litm-saved__card > .litm-save.litm-save--card { left: 20px; margin-top: calc(75% - 50px); }
body.home.litm-saved-ready .home-shop ul.products li.product .litm-new { left: 62px; margin-top: calc(75% - 46px); }

/* Product page: on the main photo, in the same bottom-left spot as the shop grid. The gallery is as wide as the photo. */
.woocommerce-product-gallery { position: relative; }
.litm-save.litm-save--photo { position: absolute; top: 0; left: 12px; z-index: 6; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: calc(75% - 58px) 0 0; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(27, 42, 65, .28); }
.litm-save.litm-save--photo svg { width: 26px; height: 26px; }
.litm-save.litm-save--photo:hover { color: #8E2DE2; }

/* Product page: under Add To Cart. */
.litm-save.litm-save--page { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 10px 20px; border: 2px solid #E7DEF3; border-radius: 999px; background: #fff; color: #4B2C7A; font-size: 16px; font-weight: 600; line-height: 1.2; }
.litm-save.litm-save--page:hover { border-color: #7B4FB5; }
.litm-save.litm-save--page svg { color: #6B3FA8; }

@media (max-width: 600px) {
	.litm-save.litm-save--card { left: 6px; width: 32px; height: 32px; margin-top: calc(75% - 37px); }
	.litm-save.litm-save--card svg { width: 18px; height: 18px; }
	/* A bigger tap target than the circle shows. */
	.litm-save.litm-save--card::after { content: ""; position: absolute; inset: -6px; }
	.litm-saved-ready li.product .litm-new:not(.litm-new--page) { left: 42px; }
	body.home .home-shop ul.products li.product > .litm-save--card,
	.litm-saved__card > .litm-save.litm-save--card { left: 18px; margin-top: calc(75% - 43px); }
	body.home.litm-saved-ready .home-shop ul.products li.product .litm-new { left: 54px; margin-top: calc(75% - 38px); }
}

/* ---------- Next to the header cart ---------- */

.litm-header-icons { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.litm-saved-link { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 44px; color: #6B3FA8; }
.litm-saved-link svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; overflow: visible; }
.litm-saved-link.has-saved svg { fill: currentColor; }
.litm-saved-link:focus-visible { outline: 3px solid #2AAFBC; outline-offset: 2px; border-radius: 8px; }
.litm-saved-count { position: absolute; top: 0; right: -2px; display: flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; background: #7B4FB5; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; box-sizing: border-box; }
.litm-saved-count[hidden] { display: none; }

/* ---------- The little message at the bottom of the screen ---------- */

.litm-saved-toast { position: fixed; left: 50%; bottom: 20px; z-index: 99990; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 14px; background: #1B2A41; color: #fff; font-size: 15px; line-height: 1.4; box-shadow: 0 10px 28px rgba(27, 42, 65, .35); box-sizing: border-box; visibility: hidden; opacity: 0; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s, visibility .2s; }
.litm-saved-toast.is-open { visibility: visible; opacity: 1; transform: translate(-50%, 0); }
.litm-saved-toast a,
.litm-saved-toast button { padding: 0; border: 0; background: none; color: #8EE6EE; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.litm-saved-toast a:focus-visible,
.litm-saved-toast button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.litm-saved-toast { transition: none; }
}

/* ---------- The list ---------- */

.litm-saved { max-width: 1100px; margin: 0 auto; color: #1B2A41; }
.litm-saved__note { margin: 0 0 24px; font-size: 16px; line-height: 1.5; }
.litm-saved__note a { color: #6B3FA8; font-weight: 600; text-decoration: underline; }
.litm-saved__status { margin: 0 0 24px; font-size: 16px; }
.litm-saved__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
.litm-saved__grid:empty { display: none; }
.litm-saved__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 12px 16px; border: 1px solid #E7DEF3; border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(27, 42, 65, .06); box-sizing: border-box; }
.litm-saved__photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin: 0 0 12px; border-radius: 10px; overflow: hidden; background: #F7F2FD; }
.litm-saved__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.litm-saved .litm-saved__name { margin: 0 0 6px; font-size: 16px; line-height: 1.3; }
.litm-saved__name a { color: #1B2A41; text-decoration: none; }
.litm-saved__name a:hover { color: #6B3FA8; text-decoration: underline; }
.litm-saved__price { margin: 0 0 14px; font-size: 15px; font-weight: 600; }
.litm-saved .litm-saved__buy,
.litm-saved__browse { display: inline-block; margin-top: auto; padding: 10px 20px; border: 0; border-radius: 999px; background: linear-gradient(120deg, #8E2DE2, #1A8E9A); color: #fff; font-size: 15px; font-weight: 600; line-height: 1.3; text-align: center; text-decoration: none; }
.litm-saved .litm-saved__buy:hover,
.litm-saved__browse:hover { color: #fff; filter: brightness(1.08); }
.litm-saved .litm-saved__buy:focus-visible,
.litm-saved__browse:focus-visible { outline: 3px solid #2AAFBC; outline-offset: 2px; }
.litm-saved .litm-saved__card a.added_to_cart { display: inline-block; margin: 8px 0 0; padding: 0; border: 0; background: none; box-shadow: none; color: #6B3FA8; font-size: 15px; font-weight: 600; text-decoration: underline; }
.litm-saved__empty { padding: 36px 24px; border: 1px solid #E7DEF3; border-radius: 16px; background: #fff; text-align: center; }
.litm-saved__empty[hidden],
.litm-saved__status[hidden] { display: none; }
.litm-saved .litm-saved__empty-title { margin: 0 0 8px; font-size: 24px; line-height: 1.25; }
.litm-saved__empty p { margin: 0 0 18px; font-size: 16px; line-height: 1.5; }

@media (max-width: 600px) {
	.litm-saved__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.litm-saved__card { padding: 10px 10px 14px; }
	.litm-saved .litm-saved__buy { display: block; width: 100%; padding: 10px 8px; box-sizing: border-box; }
	/* The card's padding is 10px here. */
	.litm-saved__card > .litm-save.litm-save--card { left: 16px; margin-top: calc(75% - 42px); }
}