/* /print-labels-from-excel: one column of a workbook (SKU codes with leading zeros, kept as text)
   is selected and dealt out as 2 x 1 barcode labels. Apricot desk with soft stripes, ink and orange.
   Static (reduced-motion) state: column selected, badge on, all four labels shown. */
.hub-anim.ha-print-labels-from-excel .ha-stage { background-color: #fde9d4; background-image: repeating-linear-gradient(135deg, rgba(234, 88, 12, 0.06) 0 2px, transparent 2px 16px); border: 1px solid #f6d6b6; }
.hub-anim.ha-print-labels-from-excel .hx-scene { --fb: 2.3rem; --rh: 2.35rem; --nc: 2.3rem; --ca: 32%; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.6rem; align-items: center; max-width: 860px; margin: 0 auto 0.6rem; }
.hub-anim.ha-print-labels-from-excel .hx-book { position: relative; background: #fff; border: 2px solid #1c1917; border-radius: 14px; transform: rotate(-1.5deg); box-shadow: 6px 7px 0 #1c1917; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-file { height: var(--fb); box-sizing: border-box; margin: 0; padding: 0 0.9rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 2px solid #1c1917; background: #fff4e8; border-radius: 12px 12px 0 0;
    font: 700 0.78rem/1 "SFMono-Regular", Consolas, monospace; color: #1c1917; text-align: left; }
.hub-anim.ha-print-labels-from-excel .hx-file::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #1c1917; box-shadow: 15px 0 0 #fdba74, 30px 0 0 #fdba74; margin-right: 32px; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; font: 500 0.84rem/1 Inter, system-ui, sans-serif; color: #292524; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel th, body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel td { height: var(--rh); box-sizing: border-box; padding: 0 0.65rem; border: 0; border-bottom: 1px solid #f1e4d6; border-left: 1px solid #f1e4d6; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: clip; vertical-align: middle; background: transparent; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel tbody tr:last-child th, body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel tbody tr:last-child td { border-bottom: 0; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel thead th { font: 700 0.7rem/1 "SFMono-Regular", Consolas, monospace; color: #a8a29e; text-align: center; background: #fffaf4; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel thead th:first-child { width: var(--nc); }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel thead th.hx-a { width: var(--ca); }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel thead th:last-child { width: 24%; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel tbody th { font: 700 0.7rem/1 "SFMono-Regular", Consolas, monospace; color: #a8a29e; text-align: center; background: #fffaf4; padding: 0; border-left: 0; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel thead th:first-child { border-left: 0; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-h td { font: 800 0.7rem/1 Manrope, Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #78716c; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel td.hx-a { font: 700 0.86rem/1 "SFMono-Regular", Consolas, monospace; color: #1c1917; position: relative; z-index: 1; }
.hub-anim.ha-print-labels-from-excel .hx-a em { font-style: normal; color: #ea580c; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel thead th.hx-a { position: relative; overflow: visible; z-index: 2; }
.hub-anim.ha-print-labels-from-excel .hx-sel { position: absolute; z-index: 0; left: -1px; right: -1px; top: 0; height: calc(var(--rh) * 6); box-sizing: border-box; border: 2.5px solid #ea580c; background: rgba(251, 146, 60, 0.16); border-radius: 3px; pointer-events: none; transform-origin: top; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-badge { position: absolute; z-index: 2; left: calc(var(--nc) + 0.2rem); top: calc(100% + 0.45rem); margin: 0; padding: 0.45rem 0.75rem; background: #1c1917; color: #fff; border-radius: 999px;
    font: 800 0.76rem/1 Manrope, Inter, sans-serif; white-space: nowrap; transform: rotate(-3deg); text-align: left; }
.hub-anim.ha-print-labels-from-excel .hx-badge::before { content: ""; position: absolute; left: 1.1rem; top: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: #1c1917; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.9rem; }
body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-labels li { margin: 0; min-width: 0; aspect-ratio: 2 / 1; box-sizing: border-box; padding: 0.55rem 0.7rem 0.5rem; background: #fff; border: 1.5px solid #1c1917; border-radius: 9px;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; box-shadow: 0 12px 20px -12px rgba(28, 25, 23, 0.55); transform: rotate(var(--rot, 0deg)); text-align: center; }
.hub-anim.ha-print-labels-from-excel .hx-k1 { --rot: -3deg; } .hub-anim.ha-print-labels-from-excel .hx-k2 { --rot: 2deg; } .hub-anim.ha-print-labels-from-excel .hx-k3 { --rot: 1.5deg; } .hub-anim.ha-print-labels-from-excel .hx-k4 { --rot: -2deg; }
.hub-anim.ha-print-labels-from-excel .hx-bars { display: block; width: 86%; height: 36%; min-height: 20px; background: repeating-linear-gradient(90deg, #1c1917 0 2px, transparent 2px 3px, #1c1917 3px 4px, transparent 4px 7px, #1c1917 7px 10px, transparent 10px 11px, #1c1917 11px 12px, transparent 12px 14px, #1c1917 14px 15px, transparent 15px 18px); }
.hub-anim.ha-print-labels-from-excel .hx-k2 .hx-bars { background-position: 5px 0; } .hub-anim.ha-print-labels-from-excel .hx-k3 .hx-bars { background-position: 9px 0; } .hub-anim.ha-print-labels-from-excel .hx-k4 .hx-bars { background-position: 13px 0; }
.hub-anim.ha-print-labels-from-excel .hx-labels b { font: 800 0.95rem/1 "SFMono-Regular", Consolas, monospace; letter-spacing: 0.06em; color: #1c1917; }
.hub-anim.ha-print-labels-from-excel .hx-labels b em { font-style: normal; color: #ea580c; }
.hub-anim.ha-print-labels-from-excel .hx-labels span { font: 600 0.68rem/1.1 Inter, system-ui, sans-serif; color: #57534e; }
@media (max-width: 760px) {
    .hub-anim.ha-print-labels-from-excel .hx-scene { --rh: 2.1rem; --nc: 1.8rem; grid-template-columns: minmax(0, 1fr); gap: 3.4rem; margin-bottom: 0; }
    .hub-anim.ha-print-labels-from-excel .hx-book { box-shadow: 4px 5px 0 #1c1917; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel table { font-size: 0.76rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel td.hx-a { font-size: 0.78rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel th, body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel td { padding: 0 0.45rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-labels { gap: 0.8rem 0.7rem; }
    body.article-page article.blog-content .hub-anim.ha-print-labels-from-excel .hx-labels li { padding: 0.4rem 0.5rem; }
    .hub-anim.ha-print-labels-from-excel .hx-labels b { font-size: 0.82rem; }
    .hub-anim.ha-print-labels-from-excel .hx-labels span { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: no-preference) {
    .hub-anim.ha-print-labels-from-excel .hx-sel, .hub-anim.ha-print-labels-from-excel .hx-badge, .hub-anim.ha-print-labels-from-excel .hx-a em, .hub-anim.ha-print-labels-from-excel .hx-labels li { animation-duration: 10s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease-out; }
    .hub-anim.ha-print-labels-from-excel .hx-sel { animation-name: haxSel; }
    @keyframes haxSel { 0%, 6% { opacity: 0; transform: scaleY(0); } 7% { opacity: 1; transform: scaleY(0); } 16%, 92% { opacity: 1; transform: scaleY(1); } 97%, 100% { opacity: 0; transform: scaleY(1); } }
    .hub-anim.ha-print-labels-from-excel .hx-badge { animation-name: haxBadge; animation-timing-function: cubic-bezier(.2, 1.6, .4, 1); }
    @keyframes haxBadge { 0%, 19% { opacity: 0; transform: translateY(-8px) rotate(-12deg) scale(0.6); } 25%, 92% { opacity: 1; transform: rotate(-3deg); } 97%, 100% { opacity: 0; transform: rotate(-3deg); } }
    .hub-anim.ha-print-labels-from-excel .hx-book .hx-a em { animation-name: haxZero; }
    @keyframes haxZero { 0%, 20% { background: transparent; } 24%, 30% { background: #fed7aa; } 36%, 100% { background: transparent; } }
    .hub-anim.ha-print-labels-from-excel .hx-k1 { animation-name: haxK1; }
    @keyframes haxK1 { 0%, 34% { opacity: 0; transform: translate(var(--fx, -70%), var(--fy, 0)) rotate(-12deg) scale(0.55); } 35% { opacity: 1; } 40%, 92% { opacity: 1; transform: rotate(var(--rot)); } 97%, 100% { opacity: 0; transform: translateY(8px) rotate(var(--rot)); } }
    .hub-anim.ha-print-labels-from-excel .hx-k2 { animation-name: haxK2; }
    @keyframes haxK2 { 0%, 42% { opacity: 0; transform: translate(var(--fx, -70%), var(--fy, 0)) rotate(-12deg) scale(0.55); } 43% { opacity: 1; } 48%, 92% { opacity: 1; transform: rotate(var(--rot)); } 97%, 100% { opacity: 0; transform: translateY(8px) rotate(var(--rot)); } }
    .hub-anim.ha-print-labels-from-excel .hx-k3 { animation-name: haxK3; }
    @keyframes haxK3 { 0%, 50% { opacity: 0; transform: translate(var(--fx, -70%), var(--fy, 0)) rotate(-12deg) scale(0.55); } 51% { opacity: 1; } 56%, 92% { opacity: 1; transform: rotate(var(--rot)); } 97%, 100% { opacity: 0; transform: translateY(8px) rotate(var(--rot)); } }
    .hub-anim.ha-print-labels-from-excel .hx-k4 { animation-name: haxK4; }
    @keyframes haxK4 { 0%, 58% { opacity: 0; transform: translate(var(--fx, -70%), var(--fy, 0)) rotate(-12deg) scale(0.55); } 59% { opacity: 1; } 64%, 92% { opacity: 1; transform: rotate(var(--rot)); } 97%, 100% { opacity: 0; transform: translateY(8px) rotate(var(--rot)); } }
    @media (max-width: 760px) { .hub-anim.ha-print-labels-from-excel .hx-labels li { --fx: 0; --fy: -90%; } }
}