/* 99SEEDS v3 free-seed tracker: add-to-cart toast and cart card. One box per tier, filling up in the button colour. */

/* The tracker replaces the old bar, popup and footer button. */
.h-v3 :is(#upsell-fixed-bar, #upsell-popup, #upsell-minimized) { display: none !important; }

/* ---------- Toast ---------- */
.h-toast.s-toast { display: block; width: min(420px, calc(100vw - 40px)); max-width: none; padding: 16px 18px 18px; border: 0; border-radius: 20px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 18px 48px rgba(0, 0, 0, .18); }
.h-toast[hidden] { display: none; }
.h-toast__top { display: grid; grid-template-columns: 32px minmax(0, 1fr) 30px; gap: 12px; align-items: center; }
.h-toast__check { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #000; }
.h-toast__check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.h-toast .h-toast__top p { margin: 0; font: 700 16px/1.25 var(--h-font); }
.h-toast .h-toast__top p span { display: block; overflow: hidden; margin-top: 2px; color: #555; font-weight: 400; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; }
.h-toast__close { align-self: start; }
.h-toast__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.h-toast .h-bonus { margin-top: 14px; padding: 14px 14px 12px; border-radius: 14px; background: var(--h-grey); }
.h-toast__ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.h-toast__ctas .h-btn { width: 100%; padding-inline: 12px; }
html .h-btn--ghost, html button.h-btn--ghost:is(:hover, :focus) { background: transparent; box-shadow: inset 0 0 0 1.5px #000; color: #000 !important; }
html button.h-btn--ghost:hover { background: rgba(0, 0, 0, .05); }

/* ---------- Tracker ---------- */
.h-bonus { color: #000; font-family: var(--h-font); }
.h-bonus p { margin: 0; }
.h-bonus__kicker { display: flex; justify-content: space-between; gap: 12px; font: 700 12px/1.2 var(--h-font); letter-spacing: .06em; text-transform: uppercase; }
.h-bonus__kicker span { color: #555; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.h-bonus__head { margin-top: 6px !important; font: 700 22px/1.1 var(--h-font); font-stretch: 75%; font-variation-settings: 'wdth' 75; letter-spacing: -.005em; }
.h-bonus__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0 10px; padding: 0; list-style: none; }
.h-bonus__steps li { margin: 0; text-align: center; }
.h-bonus__box { position: relative; display: grid; place-items: center; height: 54px; overflow: hidden; border: 1.5px solid rgba(0, 0, 0, .18); border-radius: 12px; background: #fff; }
.h-bonus__box i { position: absolute; inset: 0; background: var(--p-btn, var(--h-yellow)); transform: scaleY(var(--fill, 0)); transform-origin: 50% 100%; }
.h-bonus__box b { position: relative; font: 700 24px/1 var(--h-font); font-stretch: 75%; font-variation-settings: 'wdth' 75; color: #777; }
.h-bonus__box svg { position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; fill: none; stroke: #000; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; }
.h-bonus__from { display: block; margin-top: 5px; color: #666; font: 500 12px/1.2 var(--h-font); white-space: nowrap; }
.h-bonus__steps .is-next .h-bonus__box { border-color: #000; }
.h-bonus__steps .is-next b, .h-bonus__steps .is-done b { color: #000; }
.h-bonus__steps .is-done .h-bonus__box { border-color: #000; }
.h-bonus__steps .is-done .h-bonus__box svg { stroke-dashoffset: 0; }
.h-bonus__steps :is(.is-next, .is-done) .h-bonus__from { color: #000; font-weight: 700; }
.h-bonus__sub { color: #444; font-size: 14px; line-height: 1.35; }
.h-bonus__ship { display: flex; align-items: center; gap: 8px; margin-top: 10px !important; padding-top: 10px; border-top: 1px solid rgba(0, 0, 0, .1); font-size: 14px; line-height: 1.3; }
.h-bonus__ship svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.h-bonus__ship.is-free { font-weight: 700; }

/* Fill from the old cart value to the new one, then tick the tiers just reached. */
.h-bonus__steps .is-anim .h-bonus__box i { animation: h-bonus-fill .9s var(--h-ease) var(--delay, 0s) both; }
.h-bonus__steps .is-new .h-bonus__box { animation: h-bonus-pop .45s var(--h-ease) calc(var(--delay, 0s) + .55s) both; }
.h-bonus__steps .is-new .h-bonus__box svg { animation: h-bonus-tick .35s ease calc(var(--delay, 0s) + .7s) both; }
@keyframes h-bonus-fill { from { transform: scaleY(var(--from, 0)); } }
@keyframes h-bonus-pop { 50% { transform: scale(1.05); } }
@keyframes h-bonus-tick { from { stroke-dashoffset: 16; } }
@media (prefers-reduced-motion: reduce) {
	.h-bonus__steps :is(.is-anim, .is-new) :is(.h-bonus__box, .h-bonus__box i, .h-bonus__box svg) { animation: none; }
}

/* ---------- Cart page card ---------- */
.woocommerce-cart .h-bonus-live--cart { margin-top: 16px; padding: 22px 24px; border-radius: 20px; background: #fff; }
.woocommerce-cart .h-bonus-live--cart .h-bonus { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); grid-template-areas: "kicker steps" "head steps" "sub steps" "ship ship"; column-gap: 32px; align-items: start; }
.h-bonus-live--cart .h-bonus__kicker { grid-area: kicker; }
.h-bonus-live--cart .h-bonus__head { grid-area: head; font-size: 28px; }
.h-bonus-live--cart .h-bonus__sub { grid-area: sub; margin-top: 6px !important; }
.h-bonus-live--cart .h-bonus__steps { grid-area: steps; margin: 0; }
.h-bonus-live--cart .h-bonus__ship { grid-area: ship; margin-top: 16px !important; padding-top: 14px; }

@media (max-width: 999px) {
	.h-toast.s-toast { right: 16px; left: 16px; width: auto; }
	.woocommerce-cart .h-bonus-live--cart { padding: 18px; }
	.woocommerce-cart .h-bonus-live--cart .h-bonus { grid-template-columns: 1fr; grid-template-areas: "kicker" "head" "steps" "sub" "ship"; }
	.h-bonus-live--cart .h-bonus__head { font-size: 24px; }
	.h-bonus-live--cart .h-bonus__steps { margin: 12px 0 10px; }
	.h-bonus-live--cart .h-bonus__sub { margin-top: 0 !important; }
}
@media (max-width: 380px) {
	.h-bonus__steps { gap: 6px; }
	.h-bonus__from { font-size: 11px; }
}