/* Bodyfirst Favourites. Same design as the theme lab; uses the theme's colour tokens. */

.fav-btn { display: inline-grid; place-items: center; padding: 0; border: 0; background: none; color: var(--c-link, #0F75BC); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; }
.fav-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: fill 0.15s ease; }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
.fav-btn:hover { transform: scale(1.08); }
.fav-btn:focus-visible { outline: 2px solid var(--c-secondary, #05ABEF); outline-offset: 2px; }
.fav-btn.is-pop svg { animation: bf-fav-pop 0.35s ease; }
@keyframes bf-fav-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .fav-btn.is-pop svg { animation: none; } .fav-btn:hover { transform: none; } }
[data-scheme="dark"] .fav-btn { color: var(--c-secondary, #05ABEF); }

/* Product cards: a white circle, top right of the photo, above the card's own link. */
.fav-card { position: absolute; top: 10px; right: 10px; z-index: 4; width: 38px; height: 38px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12); }
/* Product page: a round outline button beside Add to cart. */
.fav-pdp { flex: none; width: 52px; height: 52px; min-height: 0; margin: 0; border-radius: 50%; border: 2px solid var(--c-border, #E8E8E9); background: var(--c-bg, #FFFFFF); }
.fav-pdp svg { width: 22px; height: 22px; }
.fav-pdp[aria-pressed="true"] { border-color: var(--c-link, #0F75BC); background: var(--primary-soft, #EAF4FB); }
/* The theme makes extra items in the add-to-cart row full width: keep the heart round, beside the button. */
form.cart .fav-pdp, form.cart > .fav-pdp, .woocommerce-variation-add-to-cart .fav-pdp { flex: 0 0 52px !important; flex-basis: 52px !important; width: 52px !important; max-width: 52px; height: 52px; align-self: center; }
/* In the list: just the heart (tap to remove). */
.fav-list { flex: none; width: 34px; height: 34px; margin: -6px -6px 0 0; border-radius: 50%; }
.fav-list:hover { background: var(--primary-soft, #EAF4FB); }

/* Header heart (copies the cart button) with its own lime count badge. */
.fav-head-btn { position: relative; }
.fav-head-btn > svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bf-fav-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-accent, #A6FF00); color: var(--on-accent, #111111); box-shadow: 0 0 0 2px var(--c-headerBg, #FFFFFF); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; pointer-events: none; box-sizing: border-box; }
.bf-fav-count[data-empty] { display: none; }

/* Continue to cart, at the bottom of the list. */
.fav-continue { flex: none; padding: 14px 20px 0; border-top: 1px solid var(--c-border, #E8E8E9); background: var(--c-bg, #FFFFFF); box-shadow: 0 -8px 24px rgba(16, 24, 40, 0.06); }
.fav-to-cart { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.fav-to-cart svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fav-continue + .fav-foot { border-top: 0; padding-top: 10px; }

/* The drawer */
.drawer-panel:has(.fav-body) { width: min(460px, 94vw); }
.fav-body { display: flex; flex-direction: column; }
.fav-intro { flex: none; margin: 0; padding: 12px 20px; background: var(--primary-soft, #EAF4FB); color: var(--c-heading, #111111); font-size: 13.5px; text-align: center; }
.fav-loading { margin: auto; padding: 32px 20px; color: var(--c-text, #666666); font-size: 14px; text-align: center; }
/* Its own class, not the cart's "cart-items" (the Empty cart button attaches to cart lists). */
.fav-items { list-style: none; margin: 0; padding: 4px 20px; flex: 1; overflow-y: auto; display: grid; align-content: start; }
.fav-brand { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-link, #0F75BC); }
.fav-item strong a { color: inherit; text-decoration: none; }
.fav-item strong a:hover { color: var(--c-link, #0F75BC); }
.fav-price { font-weight: 700; color: var(--c-heading, #111111); }
.fav-price del { margin-left: 6px; font-size: 13px; font-weight: 400; opacity: 0.6; }
.fav-price ins { text-decoration: none; }
.fav-select { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 600; color: var(--c-heading, #111111); }
.fav-select select { width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--c-border, #E8E8E9); border-radius: var(--radius-sm, 8px); background: var(--c-bg, #FFFFFF); color: var(--c-heading, #111111); font: inherit; font-weight: 500; }
.fav-select select:focus { outline: none; border-color: var(--c-link, #0F75BC); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-link, #0F75BC) 18%, transparent); }
.fav-select select.is-missing { border-color: #C62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.15); }
.fav-add { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; text-decoration: none; }
.fav-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fav-add[disabled] { opacity: 0.6; cursor: wait; }
.fav-out { margin-top: 6px; color: #B42318; font-weight: 500; }
.fav-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 14px 20px; border-top: 1px solid var(--c-border, #E8E8E9); background: var(--c-bg, #FFFFFF); font-size: 13px; color: var(--c-text, #666666); }
.fav-foot .cart-clear-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--c-border, #E8E8E9); border-radius: 999px; background: var(--c-bg, #FFFFFF); color: var(--c-text, #666666); font-size: 13px; font-weight: 500; cursor: pointer; }
.fav-foot .cart-clear-btn:hover { border-color: var(--c-link, #0F75BC); color: var(--c-link, #0F75BC); }
.fav-foot .cart-clear-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fav-foot .cart-clear-yes { padding: 6px 14px; border: 0; border-radius: 999px; background: #C62828; color: #FFFFFF; font-size: 13px; font-weight: 600; cursor: pointer; }
.fav-foot .link-btn { border: 0; background: none; padding: 0; color: var(--c-link, #0F75BC); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.fav-empty { margin: auto 0; padding: 32px 24px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.fav-empty p { margin: 0; color: var(--c-text, #666666); }
.fav-empty strong { color: var(--c-heading, #111111); }
.fav-empty-art { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--primary-soft, #EAF4FB); color: var(--c-link, #0F75BC); }
.fav-empty-art svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }