/* /product-labels: one jar, one label layout, three rows from a list (peach shop-shelf look). */
.hub-anim.ha-product-labels .ha-stage { border: 1px solid #f1d3b8; min-height: 0;
    background: radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.55) 0 70px, transparent 71px), radial-gradient(circle at 10% 92%, rgba(244, 114, 82, 0.14) 0 120px, transparent 121px), linear-gradient(180deg, #fde6d2 0%, #fbdcc3 100%); }
.hub-anim.ha-product-labels .ha-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: #c98b5b; border-top: 3px solid #0f0f12;
    background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 90px); }
.hub-anim.ha-product-labels .hp-scene { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1.6rem; padding-bottom: 0; }
/* the list note */
.hub-anim.ha-product-labels .hp-note { position: relative; align-self: center; width: 230px; flex: 0 0 auto; padding: 1.1rem 0.9rem 0.8rem; background: #fffdf8; border: 2px solid #0f0f12; border-radius: 12px;
    transform: rotate(-2.5deg); box-shadow: 5px 6px 0 #0f0f12; box-sizing: border-box; margin-bottom: 2.4rem; }
.hub-anim.ha-product-labels .hp-note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgba(250, 204, 21, 0.75); transform: rotate(3deg); border-radius: 3px; }
.hub-anim.ha-product-labels .hp-note-head { font: 800 0.68rem/1 Manrope, Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: #71717a; margin: 0 0 0.55rem 0.35rem; }
.hub-anim.ha-product-labels .hp-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.4rem; border-radius: 8px; border-top: 1px dashed #e4ddcf; font: 600 0.9rem/1.2 Inter, system-ui, sans-serif; color: #1f2937; }
.hub-anim.ha-product-labels .hp-row span { flex: 1 1 auto; min-width: 0; }
.hub-anim.ha-product-labels .hp-row b { font: 700 0.84rem/1 "SFMono-Regular", Consolas, monospace; color: #0f0f12; }
.hub-anim.ha-product-labels .hp-row i { width: 12px; height: 12px; border-radius: 999px; border: 1.5px solid #0f0f12; flex: 0 0 auto; }
.hub-anim.ha-product-labels .hp-r1 i { background: #e2463f; } .hub-anim.ha-product-labels .hp-r2 i { background: #5b4bb7; } .hub-anim.ha-product-labels .hp-r3 i { background: #f59e0b; }
.hub-anim.ha-product-labels .hp-r1 { background: #fff1c2; }
.hub-anim.ha-product-labels .hp-arrow { align-self: center; color: #0f0f12; margin-bottom: 2.4rem; }
.hub-anim.ha-product-labels .hp-arrow svg { width: 64px; height: 32px; display: block; }
/* the jar */
.hub-anim.ha-product-labels .hp-jar { --jw: 230px; position: relative; width: var(--jw); flex: 0 0 auto; margin-bottom: -2px; }
.hub-anim.ha-product-labels .hp-lid { width: 72%; height: 40px; margin: 0 auto -4px; position: relative; z-index: 2; border: 2.5px solid #0f0f12; border-radius: 10px 10px 6px 6px; box-sizing: border-box;
    background: repeating-linear-gradient(90deg, #3f6b4f 0 9px, #345b42 9px 12px); }
.hub-anim.ha-product-labels .hp-body { position: relative; height: calc(var(--jw) * 1.02); border: 2.5px solid #0f0f12; border-radius: 40px 40px 30px 30px; overflow: hidden; box-sizing: border-box;
    background: rgba(255, 255, 255, 0.45); box-shadow: 0 22px 30px -18px rgba(80, 40, 10, 0.55); }
.hub-anim.ha-product-labels .hp-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 86%; border-top: 2px solid rgba(15, 15, 18, 0.25); }
.hub-anim.ha-product-labels .hp-f1 { background: linear-gradient(180deg, #ef5a4c, #c9302c); }
.hub-anim.ha-product-labels .hp-f2 { background: linear-gradient(180deg, #6d5cc9, #43358f); opacity: 0; }
.hub-anim.ha-product-labels .hp-f3 { background: linear-gradient(180deg, #fbb43c, #e98a0c); opacity: 0; }
.hub-anim.ha-product-labels .hp-shine { position: absolute; left: 9%; top: 9%; width: 11px; height: 68%; border-radius: 999px; background: rgba(255, 255, 255, 0.55); z-index: 1; }
/* the label */
.hub-anim.ha-product-labels .hp-lab { position: absolute; left: 50%; top: calc(36px + var(--jw) * 0.51); width: 76%; margin: 0; transform: translate(-50%, -44%); z-index: 3; box-sizing: border-box;
    padding: 0.7rem 0.75rem 0.6rem; background: #fffdf8; border: 2px solid #0f0f12; border-radius: 10px; text-align: center; box-shadow: 0 6px 12px -6px rgba(15, 15, 18, 0.5); }
.hub-anim.ha-product-labels .hp-v2, .hub-anim.ha-product-labels .hp-v3 { opacity: 0; }
.hub-anim.ha-product-labels .hp-brand { font: 800 0.6rem/1 Manrope, Inter, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; color: #a14a2b; }
.hub-anim.ha-product-labels .hp-name { font: 800 1.42rem/1.05 Manrope, Inter, sans-serif; letter-spacing: -0.02em; color: #0f0f12; margin: 0.35rem 0 0.2rem; white-space: nowrap; }
.hub-anim.ha-product-labels .hp-meta { font: 600 0.74rem/1.2 Inter, system-ui, sans-serif; color: #52525b; padding-bottom: 0.5rem; border-bottom: 1.5px dashed #d6cfc0; }
.hub-anim.ha-product-labels .hp-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.hub-anim.ha-product-labels .hp-foot b { font: 800 1.05rem/1 Manrope, Inter, sans-serif; color: #0f0f12; }
.hub-anim.ha-product-labels .hp-bc { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hub-anim.ha-product-labels .hp-bc i { display: block; width: 66px; height: 22px;
    background: repeating-linear-gradient(90deg, #0f0f12 0 2px, transparent 2px 3px, #0f0f12 3px 4px, transparent 4px 6px, #0f0f12 6px 9px, transparent 9px 10px, #0f0f12 10px 11px, transparent 11px 14px, #0f0f12 14px 15px, transparent 15px 16px, #0f0f12 16px 18px, transparent 18px 21px); }
.hub-anim.ha-product-labels .hp-v2 .hp-bc i { background-position: 7px 0; } .hub-anim.ha-product-labels .hp-v3 .hp-bc i { background-position: 13px 0; }
.hub-anim.ha-product-labels .hp-bc em { font: 600 0.56rem/1 "SFMono-Regular", Consolas, monospace; font-style: normal; letter-spacing: 0.08em; color: #0f0f12; }
@media (max-width: 760px) {
    .hub-anim.ha-product-labels .ha-stage::after { height: 40px; }
    .hub-anim.ha-product-labels .hp-scene { flex-direction: column; align-items: center; gap: 0.4rem; }
    .hub-anim.ha-product-labels .hp-note { width: min(100%, 250px); margin-bottom: 0; }
    .hub-anim.ha-product-labels .hp-arrow { margin: 0; transform: rotate(90deg); }
    .hub-anim.ha-product-labels .hp-arrow svg { width: 46px; height: 24px; }
    .hub-anim.ha-product-labels .hp-jar { --jw: 196px; margin-bottom: -10px; }
    .hub-anim.ha-product-labels .hp-name { font-size: 1.2rem; }
    .hub-anim.ha-product-labels .hp-lab { width: 80%; padding: 0.6rem 0.6rem 0.5rem; }
    .hub-anim.ha-product-labels .hp-bc i { width: 56px; }
}
@media (prefers-reduced-motion: reduce) { .hub-anim.ha-product-labels .ba-toggle { display: none !important; } }
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-product-labels .hp-lab, .hub-anim.ha-product-labels .hp-fill, .hub-anim.ha-product-labels .hp-row { animation-duration: 10.5s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
    .hub-anim.ha-product-labels .hp-v1 { animation-name: hapl1; } .hub-anim.ha-product-labels .hp-v2 { animation-name: hapl2; } .hub-anim.ha-product-labels .hp-v3 { animation-name: hapl3; }
    .hub-anim.ha-product-labels .hp-f1 { animation-name: hapf1; } .hub-anim.ha-product-labels .hp-f2 { animation-name: hapf2; } .hub-anim.ha-product-labels .hp-f3 { animation-name: hapf3; }
    .hub-anim.ha-product-labels .hp-r1 { animation-name: hapr1; } .hub-anim.ha-product-labels .hp-r2 { animation-name: hapr2; } .hub-anim.ha-product-labels .hp-r3 { animation-name: hapr3; }
    /* label: drops in from above, presses on, holds, peels off to the right */
    @keyframes hapl1 { 0%, 2% { opacity: 0; transform: translate(-50%, -150%) rotate(-10deg) scale(1.08); } 6% { opacity: 1; transform: translate(-50%, -44%) rotate(0) scale(1.05); } 8%, 28% { opacity: 1; transform: translate(-50%, -44%) scale(1); }
        32%, 100% { opacity: 0; transform: translate(-10%, -90%) rotate(16deg) scale(0.95); } }
    @keyframes hapl2 { 0%, 34% { opacity: 0; transform: translate(-50%, -150%) rotate(-10deg) scale(1.08); } 38% { opacity: 1; transform: translate(-50%, -44%) rotate(0) scale(1.05); } 40%, 60% { opacity: 1; transform: translate(-50%, -44%) scale(1); }
        64%, 100% { opacity: 0; transform: translate(-10%, -90%) rotate(16deg) scale(0.95); } }
    @keyframes hapl3 { 0%, 66% { opacity: 0; transform: translate(-50%, -150%) rotate(-10deg) scale(1.08); } 70% { opacity: 1; transform: translate(-50%, -44%) rotate(0) scale(1.05); } 72%, 93% { opacity: 1; transform: translate(-50%, -44%) scale(1); }
        97%, 100% { opacity: 0; transform: translate(-10%, -90%) rotate(16deg) scale(0.95); } }
    @keyframes hapf1 { 0%, 31% { opacity: 1; } 35%, 96% { opacity: 0; } 100% { opacity: 1; } }
    @keyframes hapf2 { 0%, 31% { opacity: 0; } 35%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
    @keyframes hapf3 { 0%, 63% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes hapr1 { 0%, 1% { background: transparent; } 4%, 30% { background: #fff1c2; } 33%, 100% { background: transparent; } }
    @keyframes hapr2 { 0%, 33% { background: transparent; } 36%, 62% { background: #fff1c2; } 65%, 100% { background: transparent; } }
    @keyframes hapr3 { 0%, 65% { background: transparent; } 68%, 95% { background: #fff1c2; } 98%, 100% { background: transparent; } }
}