/* ClickaCierre — celular «tienda» del hero (#hxt, «compra sin escribirte»), biblioteca de la plantilla #7, página hija Tienda
   virtual. Lo carga la página con p.estilos, después de landing.css. Usa las clases del celular del hero (.hx, .dx-*, .hx-tag,
   .hx-miss, .find-fav) y solo agrega lo propio, con el prefijo .ht-. Lo que se mueve es solo transform y opacity (translate,
   scale).
   La pantalla es una tienda de verdad, con la grilla de una tienda WooCommerce (imagen, nombre, precio, «Añadir al carrito»).
   Cinco pantallas apiladas bajo una barra fija con el nombre de la tienda y el carrito: el catálogo, el producto, el carrito,
   el pago y el pedido confirmado; encima de todo, el aviso de «Agregado al carrito» y el aro del toque.
   Sin movimiento y sin JS queda un solo fotograma: el catálogo con la marca 1; debajo, la línea final y el enlace. Las demás
   pantallas quedan en el HTML, cubiertas por el catálogo (aria-hidden), y el sr-only de la figura cuenta la historia. Nada se
   esconde sin JS: lo que no se ve está tapado. */

/* ---------- la pantalla: debajo de la barra de estado, de borde a borde del celular */
.hx-tienda .ht-screen{position:absolute;left:0;right:0;top:36px;bottom:34px;z-index:3;overflow:hidden;background:#fff;color:#202124;font-family:Arial,sans-serif;transition:opacity .35s}
.hx-tienda .ht-screen.is-fade{opacity:0}
.hx-tienda.is-reset .ht-screen *,.hx-tienda.is-reset .ht-screen *:before,.hx-tienda.is-reset .ht-screen *:after{transition:none !important;animation:none !important}

/* ---------- la barra de la tienda: su nombre y el carrito (el número sube cuando el cliente agrega) */
.ht-top{position:absolute;left:0;right:0;top:0;z-index:6;display:flex;align-items:center;gap:9px;height:44px;margin:0;padding:0 12px;background:#fff;border-bottom:1px solid #e8eaed}
.ht-av{width:26px;height:26px;font-size:12px}
.ht-top>b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 14px/1.2 Arial,sans-serif;color:#202124}
.ht-cartic{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px}
.ht-bag{position:relative;width:16px;height:13px;margin-top:4px;border:2px solid #202124;border-radius:2px 2px 4px 4px;box-sizing:border-box}
.ht-bag:before{content:'';position:absolute;left:2px;top:-8px;width:8px;height:7px;border:2px solid #202124;border-bottom:0;border-radius:6px 6px 0 0;box-sizing:border-box}
.ht-count{position:absolute;right:-3px;top:-2px;min-width:15px;height:15px;padding:0 3px;border-radius:99px;box-sizing:border-box;background:#e8eaed;color:#5f6368;font:700 10px/15px Arial,sans-serif;font-style:normal;text-align:center}
.ht-count.is-has{background:#b8f34a;color:#0b1220;box-shadow:0 0 0 2px #fff}
.ht-count.is-pop{animation:ht-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes ht-pop{0%{scale:.5}60%{scale:1.5}100%{scale:1}}

/* ---------- las pantallas, apiladas bajo la barra. Sin movimiento manda el catálogo (encima); con movimiento (más abajo)
   el orden es el del recorrido: catálogo, producto, carrito, pago y pedido confirmado */
.ht-layer{position:absolute;left:0;right:0;top:44px;bottom:0;display:flex;flex-direction:column;overflow:hidden;background:#fff}
.ht-cat{z-index:5}
.ht-prod{z-index:2}
.ht-cart{z-index:3}
.ht-chk{z-index:4}
.ht-fin{z-index:1}
.ht-fx{position:absolute;inset:0;z-index:8;pointer-events:none}

/* ---------- 1. el catálogo: filtros arriba y una grilla de dos columnas, como la de una tienda WooCommerce */
.ht-cat{padding:0 12px 10px}
.ht-chips{flex:none;display:flex;gap:6px;margin:0;padding:9px 0 8px;font:12px/1 Arial,sans-serif}
.ht-chips b,.ht-chips span{padding:7px 12px;border-radius:999px;background:#f1f3f4;color:#3c4043;font-weight:400}
.ht-chips b{background:#0b1220;color:#f1f3e9;font-weight:700}
.ht-grid{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:8px;margin-top:4px;border-radius:12px}
.ht-card{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0;padding:6px 6px 8px;border:1px solid #e8eaed;border-radius:12px;background:#fff}
.ht-card .ht-art{flex:1;min-height:52px;margin-bottom:3px}
.ht-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 12.5px/1.25 Arial,sans-serif;color:#202124}
.ht-pr{font:12.5px/1.2 Arial,sans-serif;color:#3c4043}
.ht-add{flex:none;display:grid;place-items:center;min-height:28px;margin-top:4px;padding:0 6px;border:1.5px solid #0b1220;border-radius:999px;font:700 11.5px/1 Arial,sans-serif;color:#0b1220;white-space:nowrap;transition:scale .2s}
.ht-first .ht-add{border-color:#b8f34a;background:#b8f34a}
.ht-add.is-press{scale:.95}

/* ---------- los dibujos de los productos: una figura de CSS por rubro (frasco, bolsa, taza, ovillo, jabón y luna) y cuatro
   tintes, uno por tarjeta. Todo se mide en em: --u escala la figura según el tamaño de la imagen */
.ht-art{--bg:#efe6da;--ob:#a9835a;--u:1;position:relative;display:block;overflow:hidden;border-radius:9px;background:var(--bg);font-size:calc(var(--u) * 10px)}
.ht-art:before,.ht-art:after{content:'';position:absolute;left:50%;top:50%}
.ht-grid .ht-card:nth-of-type(2) .ht-art{--bg:#e3ebd8;--ob:#6f9158}
.ht-grid .ht-card:nth-of-type(3) .ht-art{--bg:#e9e2ee;--ob:#8d77a8}
.ht-grid .ht-card:nth-of-type(4) .ht-art{--bg:#f3dfd2;--ob:#cf7f58}
.ht-screen[data-k="jar"] .ht-art:before{width:4.6em;height:4.2em;margin:-1.4em 0 0 -2.3em;border-radius:.7em .7em 1em 1em;background:var(--ob);box-shadow:inset 0 .9em 0 rgba(255,255,255,.22)}
.ht-screen[data-k="jar"] .ht-art:after{width:.8em;height:1.4em;margin:-3.2em 0 0 -.4em;border-radius:50% 50% 50% 50%/65% 65% 35% 35%;background:#f2b441}
.ht-screen[data-k="bag"] .ht-art:before{width:4.4em;height:5.4em;margin:-2.7em 0 0 -2.2em;background:var(--ob);clip-path:polygon(6% 0,94% 0,100% 100%,0 100%);box-shadow:inset 0 .7em 0 rgba(0,0,0,.12)}
.ht-screen[data-k="bag"] .ht-art:after{width:2.6em;height:1.8em;margin:-.5em 0 0 -1.3em;border-radius:.3em;background:rgba(255,255,255,.78)}
.ht-screen[data-k="mug"] .ht-art:before{width:4em;height:3.8em;margin:-1.9em 0 0 -2.6em;border-radius:.4em .4em 1.4em 1.4em;background:var(--ob)}
.ht-screen[data-k="mug"] .ht-art:after{width:1.7em;height:2.2em;margin:-1.3em 0 0 1.4em;border:.55em solid var(--ob);border-left:0;border-radius:0 1.2em 1.2em 0;box-sizing:border-box}
.ht-screen[data-k="yarn"] .ht-art:before{width:4.8em;height:4.8em;margin:-2.4em 0 0 -2.4em;border-radius:50%;background:repeating-linear-gradient(40deg,var(--ob) 0 .45em,rgba(255,255,255,.3) .45em .7em)}
.ht-screen[data-k="yarn"] .ht-art:after{width:2.2em;height:1.4em;margin:1.5em 0 0 1.7em;border-bottom:.3em solid var(--ob);border-left:.3em solid var(--ob);border-radius:0 0 0 1.6em;box-sizing:border-box}
.ht-screen[data-k="soap"] .ht-art:before{width:5.4em;height:3.4em;margin:-1.7em 0 0 -2.7em;border-radius:1em;background:var(--ob);box-shadow:inset 0 -.5em 0 rgba(0,0,0,.1)}
.ht-screen[data-k="soap"] .ht-art:after{width:1.6em;height:3.4em;margin:-1.7em 0 0 -.8em;background:rgba(255,255,255,.7)}
.ht-screen[data-k="moon"] .ht-art:before{width:3.6em;height:3.6em;margin:-1.7em 0 0 -2.1em;border-radius:50%;box-shadow:.8em .6em 0 0 var(--ob)}
.ht-screen[data-k="moon"] .ht-art:after{width:1em;height:1em;margin:-3em 0 0 -.4em;border:.2em solid var(--ob);border-radius:50%;box-sizing:border-box}
.ht-art-big{--u:2.4;flex:1;min-height:90px;border-radius:12px}
.ht-art-sm{--u:.62;flex:none;width:54px;height:54px}

/* ---------- 2. el producto: su imagen, el nombre, el precio, una opción (talla, color, peso…) y «Agregar al carrito» */
.ht-prod{gap:10px;padding:10px 12px 12px}
.ht-pinfo{flex:none;display:flex;flex-direction:column;gap:5px}
.ht-ptitle{font:700 17px/1.2 Arial,sans-serif;color:#202124;overflow-wrap:anywhere}
.ht-pprice{font:700 16px/1.2 Arial,sans-serif;color:#3c4043}
.ht-optrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 0;font:12.5px/1 Arial,sans-serif;color:#5f6368}
.ht-vars{display:flex;gap:6px}
.ht-vars i{padding:7px 11px;border:1.5px solid #dfe2e6;border-radius:999px;background:#f6f7f9;font:12px/1 Arial,sans-serif;font-style:normal;color:#3c4043;transition:border-color .2s,background .2s}
.ht-vars i.is-on{border-color:#0b1220;background:#fff;color:#0b1220;font-weight:700}
.ht-buyrow{flex:none;display:flex;align-items:center;gap:10px}
.ht-qty{flex:none;display:flex;align-items:center;border:1.5px solid #dfe2e6;border-radius:999px;overflow:hidden;font:700 14px/1 Arial,sans-serif;color:#202124}
.ht-qty i{display:grid;place-items:center;width:28px;height:40px;font-style:normal;font-weight:400;color:#5f6368}
.ht-qty b{min-width:16px;text-align:center}
.ht-qty-sm{font-size:12.5px}
.ht-qty-sm i{width:22px;height:26px}
/* los botones (Agregar al carrito, Ir a pagar y Pagar ahora): el mismo, en lima con letra de tinta */
.ht-btn{flex:1;display:grid;place-items:center;min-height:42px;padding:0 14px;border-radius:999px;background:#b8f34a;color:#0b1220;font:700 14.5px/1 Arial,sans-serif;box-shadow:0 8px 16px -9px rgba(11,18,32,.55);transition:scale .2s}
.ht-btn.is-press{scale:.95}
/* el aviso de WooCommerce al agregar: arriba de la pantalla, con «Ver carrito» */
.ht-toast{position:absolute;left:10px;right:10px;top:8px;z-index:3;display:flex;align-items:center;gap:8px;margin:0;padding:8px 8px 8px 10px;border-radius:12px;background:#0b1220;color:#f1f3e9;font:12.5px/1.2 Arial,sans-serif;box-shadow:0 12px 22px -10px rgba(11,18,32,.6)}
.ht-toast span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ht-tick{position:relative;flex:none;width:16px;height:16px;border-radius:50%;background:#b8f34a}
.ht-tick:before{content:'';position:absolute;left:5.5px;top:2.5px;width:4px;height:8px;border-right:2px solid #0b1220;border-bottom:2px solid #0b1220;box-sizing:border-box;rotate:45deg}
.ht-view{flex:none;padding:7px 10px;border-radius:999px;background:#b8f34a;color:#0b1220;font:700 12px/1 Arial,sans-serif;transition:scale .2s}
.ht-view.is-press{scale:.94}

/* ---------- 3. el carrito: el producto con su cantidad y su precio, el cupón y el subtotal */
.ht-cart{justify-content:space-between;gap:8px;padding:12px}
.ht-h{flex:none;margin:0;font:700 17px/1.2 Arial,sans-serif;color:#202124}
.ht-line{flex:none;display:flex;align-items:center;gap:10px;padding:10px;border:1px solid #e8eaed;border-radius:12px}
.ht-lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ht-lt b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 13.5px/1.25 Arial,sans-serif;color:#202124}
.ht-lt small{font:12px/1.2 Arial,sans-serif;color:#5f6368}
.ht-lp{flex:none;align-self:flex-start;font:700 13px/1.2 Arial,sans-serif;color:#202124}
.ht-coupon{flex:none;display:flex;align-items:center;gap:8px;margin:0;padding:6px 6px 6px 12px;border:1.5px dashed #cfd3d8;border-radius:999px;font:12.5px/1 Arial,sans-serif;color:#80868b}
.ht-coupon span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ht-coupon b{flex:none;padding:7px 12px;border-radius:999px;background:#f1f3f4;color:#3c4043;font:700 12px/1 Arial,sans-serif}
.ht-sum{flex:none;display:flex;justify-content:space-between;align-items:baseline;margin:0;font:13.5px/1.2 Arial,sans-serif;color:#3c4043}
.ht-sum b{font:700 14px/1.2 Arial,sans-serif;color:#202124}
.ht-tot{padding-top:6px;border-top:1px solid #e1e4e8;font-size:14.5px;color:#202124}
.ht-tot b{font-size:17px}
.ht-go,.ht-payb{flex:none}
.ht-foot{flex:none;display:flex;flex-direction:column;gap:10px}
/* «Quizás te interese»: los productos que una tienda WooCommerce sugiere en el carrito */
.ht-cross{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:6px}
.ht-xt{flex:none;margin:0;font:700 12.5px/1.2 Arial,sans-serif;color:#202124}
.ht-xrow{flex:1;min-height:0;max-height:200px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ht-xcard{display:flex;flex-direction:column;gap:3px;min-width:0;min-height:0;padding:5px 5px 7px;border:1px solid #e8eaed;border-radius:10px}
.ht-xcard .ht-art{flex:1;min-height:36px;margin-bottom:2px}
.ht-xcard:nth-child(1) .ht-art{--bg:#e3ebd8;--ob:#6f9158}
.ht-xcard:nth-child(2) .ht-art{--bg:#e9e2ee;--ob:#8d77a8}

/* ---------- 4. el pago: los datos, la forma de entrega, el total y «Pagar ahora» */
.ht-chk{justify-content:space-between;gap:8px;padding:12px}
.ht-grp{flex:none;display:flex;flex-direction:column;gap:8px}
.ht-field{flex:none;display:flex;flex-direction:column;gap:7px;margin:0;padding:7px 12px 10px;border:1.5px solid #e1e4e8;border-radius:10px}
.ht-field small{font:11px/1 Arial,sans-serif;color:#80868b}
.ht-field i{display:block;width:62%;height:9px;border-radius:5px;background:#cfd3d8}
.ht-field .ht-val2{width:82%}
.ht-ship{flex:none;display:flex;align-items:center;gap:10px;margin:0;padding:10px 12px;border:1.5px solid #e1e4e8;border-radius:10px;font:13px/1.2 Arial,sans-serif;color:#202124}
.ht-ship.is-on{border-color:#0b1220}
.ht-ship span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ht-ship b{flex:none;font:700 13px/1.2 Arial,sans-serif}
.ht-radio{flex:none;width:16px;height:16px;border:1.8px solid #b9bec6;border-radius:50%;box-sizing:border-box}
.ht-ship.is-on .ht-radio{border-color:#0b1220;background:radial-gradient(circle,#0b1220 0 3.5px,#fff 4px)}
.ht-pay{position:relative;flex:none;display:flex;flex-direction:column;gap:8px;padding:16px 12px 12px;border:1px solid #e8eaed;border-radius:14px;background:#f6f7f9}

/* ---------- 5. el pedido confirmado: el ✓ y el pedido, ya pagado */
.ht-fin{align-items:center;justify-content:center;gap:14px;padding:12px}
.ht-ok{position:relative;flex:none;width:64px;height:64px;border-radius:50%;background:#b8f34a;box-shadow:0 0 0 7px rgba(184,243,74,.35)}
.ht-ok:before{content:'';position:absolute;left:50%;top:44%;width:12px;height:23px;margin:-12px 0 0 -6px;border-right:4.5px solid #0b1220;border-bottom:4.5px solid #0b1220;border-radius:1px;box-sizing:border-box;rotate:45deg}
.ht-oktit{font:700 17px/1.25 Arial,sans-serif;color:#202124}
.ht-order{position:relative;flex:none;align-self:stretch;display:flex;align-items:center;gap:10px;margin-top:8px;padding:16px 10px 10px;border:1px solid #e8eaed;border-radius:12px;background:#fff;box-shadow:0 10px 22px -16px rgba(11,18,32,.45)}
.ht-paid{flex:none;padding:5px 9px;border-radius:999px;background:#e7f7c7;color:#2c4a05;font:700 11px/1 Arial,sans-serif;font-style:normal}

/* ---------- las tres marcas: la 1 sobre el borde de arriba de la grilla, la 2 sobre el del cuadro del total y la 3 sobre
   el del pedido */
.hx-tienda .hx-tag{cursor:default;pointer-events:auto}
.hx-tienda .ht-grid>.hx-tag{left:8px;top:-1px}
.hx-tienda .ht-pay>.hx-tag,.hx-tienda .ht-order>.hx-tag{left:8px;top:0}

/* el cursor (o el toque) sobre una marca o la cosa que señala: se recuadra en lima y la marca se levanta, aunque aún no haya llegado */
.hx-tienda [data-part]{transition:box-shadow .25s}
.hx-tienda[data-hot="1"] .ht-grid,.hx-tienda[data-hot="2"] .ht-pay,.hx-tienda[data-hot="3"] .ht-order,
.hx-tienda .ht-grid:hover,.hx-tienda .ht-pay:hover,.hx-tienda .ht-order:hover{box-shadow:0 0 0 2.5px #b8f34a,0 0 0 6px rgba(184,243,74,.5)}
.hx-tienda[data-hot="1"] .ht-grid>.hx-tag,.hx-tienda[data-hot="2"] .ht-pay>.hx-tag,.hx-tienda[data-hot="3"] .ht-order>.hx-tag,
.hx-tienda .ht-grid:hover>.hx-tag,.hx-tienda .ht-pay:hover>.hx-tag,.hx-tienda .ht-order:hover>.hx-tag{scale:1.06;box-shadow:0 0 0 2px #fff,0 0 0 4.5px #0b1220,0 10px 20px -8px rgba(11,18,32,.55)}

/* ---------- el pie: lo que pasó, en positivo (lima y un ✓ dibujado) */
.hx-tienda .hx-miss b{color:#b8f34a}
.hx-tienda .hx-miss .find-fav{position:relative;border:0;background:#b8f34a}
.hx-tienda .hx-miss .find-fav:before{content:'';position:absolute;left:50%;top:44%;width:6px;height:12px;margin:-7px 0 0 -3px;border-right:2.5px solid #0b1220;border-bottom:2.5px solid #0b1220;box-sizing:border-box;rotate:45deg}

/* ---------- el aro del toque: un círculo que se asienta y se va (el JS lo coloca sobre el botón) */
.ht-tap{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(32,33,36,.26);box-shadow:0 0 0 2px rgba(255,255,255,.85);opacity:0;scale:.3}
.ht-tap.is-on{animation:ht-press .95s ease-out both}
@keyframes ht-press{0%{opacity:0;scale:.3}22%{opacity:1;scale:1}66%{opacity:1;scale:.92}100%{opacity:0;scale:1.5}}

/* ---------- con movimiento (la clase .is-armed la pone telefono-tienda.js): cada cosa espera su turno */
.js-motion .hx-tienda.is-armed .ht-cat{z-index:1}
.js-motion .hx-tienda.is-armed .ht-fin{z-index:5}
/* el catálogo: los filtros y las cuatro tarjetas llegan una tras otra */
.js-motion .hx-tienda.is-armed .ht-chips,.js-motion .hx-tienda.is-armed .ht-card{opacity:0;translate:0 10px;transition:opacity .35s,translate .55s var(--m-ease)}
.js-motion .hx-tienda.is-armed.is-grid .ht-chips,.js-motion .hx-tienda.is-armed.is-grid .ht-card{opacity:1;translate:0 0}
.js-motion .hx-tienda.is-armed.is-grid .ht-card:nth-of-type(2){transition-delay:.1s}
.js-motion .hx-tienda.is-armed.is-grid .ht-card:nth-of-type(3){transition-delay:.2s}
.js-motion .hx-tienda.is-armed.is-grid .ht-card:nth-of-type(4){transition-delay:.3s}
/* el producto, el carrito y el pago entran por la derecha, cada uno sobre el anterior */
.js-motion .hx-tienda.is-armed .ht-prod,.js-motion .hx-tienda.is-armed .ht-cart,.js-motion .hx-tienda.is-armed .ht-chk{translate:104% 0;box-shadow:-16px 0 28px -18px rgba(11,18,32,.4);transition:translate .55s var(--m-ease)}
.js-motion .hx-tienda.is-armed.is-prod .ht-prod,.js-motion .hx-tienda.is-armed.is-cart .ht-cart,.js-motion .hx-tienda.is-armed.is-chk .ht-chk{translate:0 0}
/* el aviso de «Agregado al carrito» baja desde arriba */
.js-motion .hx-tienda.is-armed .ht-toast{opacity:0;translate:0 -14px;transition:opacity .3s,translate .5s var(--m-ease)}
.js-motion .hx-tienda.is-armed.is-toast .ht-toast{opacity:1;translate:0 0}
/* el pedido confirmado sube sobre el pago; el ✓ se asienta con un rebote */
.js-motion .hx-tienda.is-armed .ht-fin{opacity:0;translate:0 16px;pointer-events:none;transition:opacity .35s,translate .5s var(--m-ease)}
.js-motion .hx-tienda.is-armed.is-done .ht-fin{opacity:1;translate:0 0;pointer-events:auto}
.js-motion .hx-tienda.is-armed .ht-ok{scale:.4;transition:scale .55s cubic-bezier(.34,1.56,.64,1) .1s}
.js-motion .hx-tienda.is-armed.is-done .ht-ok{scale:1}
/* las marcas: cada una llega en su momento y se queda mientras su cosa sigue a la vista */
.js-motion .hx-tienda.is-armed .hx-tag{opacity:0;scale:.4;transform-origin:14px 50%;pointer-events:none;transition:opacity .2s,scale .55s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.js-motion .hx-tienda.is-armed .is-tagged>.hx-tag{opacity:1;scale:1;pointer-events:auto}
.js-motion .hx-tienda.is-armed[data-hot="1"] .ht-grid>.hx-tag,.js-motion .hx-tienda.is-armed[data-hot="2"] .ht-pay>.hx-tag,.js-motion .hx-tienda.is-armed[data-hot="3"] .ht-order>.hx-tag,
.js-motion .hx-tienda.is-armed .ht-grid:hover>.hx-tag,.js-motion .hx-tienda.is-armed .ht-pay:hover>.hx-tag,.js-motion .hx-tienda.is-armed .ht-order:hover>.hx-tag{opacity:1;scale:1.06;pointer-events:auto}

@media (max-width:380px){
  .ht-btn{font-size:14px}
  .ht-ptitle{font-size:16px}
  .ht-vars i{padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){.ht-tap,.ht-count.is-pop{animation:none}}