/* ==========================================================================
   Akathiriya — effects layer (pairs with assets/store/js/fx.js)
   html.fx is set in <head>; fx.js adds .fx-ready. If fx.js never loads, the
   head script removes .fx after 2.5s so nothing stays hidden.
   ========================================================================== */

/* ----------------------------------------------------------- scroll reveal */
.fx :is(.fx-head, .sec-head, .section-head, .band, .fx-banner, .fx-slider,
  .round-cat, .pcard, .promo, .deal-promo, .mini-card, .why, .fx-post, .post-card, .post-lead,
  .feature, .vendor-card, .step, .cat-tile, .contact-card, .acc, .earn, .cta,
  .newsletter-head, .ft-news, .footer-grid > div, .stat-card, .panel, .about-photo-wrap,
  .prose-article > h2, .prose-article > .table-scroll, .article-products,
  .db-hero, .db-kpi, .db-panel, .palette-card, .font-card, .brand-up):not(.fx-in) {
  opacity: 0;
  transform: translateY(22px);
}
.fx .fx-reveal {
  transition: opacity .6s cubic-bezier(.2,.7,.2,1) var(--fx-delay, 0ms),
              transform .7s cubic-bezier(.2,.7,.2,1) var(--fx-delay, 0ms),
              box-shadow .2s, border-color .2s, background .2s;
}
.fx .fx-reveal.fx-in { opacity: 1; transform: none; }
/* cards keep their own hover lift after revealing */
.fx .pcard.fx-in:hover { transform: translateY(-4px); }
.fx .round-cat.fx-reveal:not(.fx-in) { transform: scale(.85); }
.fx .fx-banner.fx-reveal:not(.fx-in) { transform: translateX(26px); }
.fx .fx-slider.fx-reveal:not(.fx-in) { transform: scale(.97); }

/* ------------------------------------------------------------------ ripple */
.fx-ripple-host { overflow: hidden; isolation: isolate; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  background: currentColor; opacity: .18; transform: scale(0);
  animation: fx-ripple .6s ease-out forwards;
}
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }

/* -------------------------------------------------------- card spotlight */
.fx-spot { position: relative; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .09), transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.fx-spot:hover::after { opacity: 1; }

/* ---------------------------------------------------------- image fade-in */
.fx-img { opacity: 0; filter: blur(6px); transition: opacity .5s, filter .6s; }
.fx-img.fx-img-in { opacity: 1; filter: none; }

/* ------------------------------------------------------ wishlist heart pop */
.js-wish { position: relative; overflow: visible; }
.js-wish.fx-pop .ic { animation: fx-heart .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes fx-heart { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fx-spark {
  position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: var(--coral); pointer-events: none;
  animation: fx-spark .55s ease-out forwards;
}
@keyframes fx-spark {
  0% { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-22px) scale(.2); opacity: 0; }
}

/* ------------------------------------------------- reading progress bar */
.fx-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 200; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--coral));
}

/* --------------------------------------------- back-to-top progress ring */
.to-top { overflow: visible; }
.fx-ring { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.fx-ring circle {
  fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 138.2; stroke-dashoffset: calc(138.2 * (1 - var(--p, 0)));
  transition: stroke-dashoffset .1s linear;
}
.to-top:hover { transform: translateY(-3px); }

/* -------------------------------------------------- blog TOC: active part */
.toc a { transition: color .2s, border-color .2s, padding-left .2s; }
.toc a.is-active { color: var(--accent); border-left-color: var(--accent); font-weight: 700; padding-left: 18px; }

/* ----------------------------------------------------- rails: drag, edges */
.rail { cursor: grab; }
.rail.fx-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.fx-dragging * { pointer-events: none; }
.rail-cards:not(.fx-at-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 50px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 50px), transparent); }

/* ------------------------------------------------------ hero slider extras */
.fx-autoplay .fx-dots button.active { position: relative; overflow: hidden; }
.fx-autoplay .fx-dots button.active::after {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55);
  transform-origin: 0 50%; animation: fx-slide-timer 6s linear forwards;
}
@keyframes fx-slide-timer { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.fx-slide.active .fx-slide-copy > * { animation: fx-up .7s cubic-bezier(.2,.7,.2,1) both; }
.fx-slide.active .fx-slide-copy > :nth-child(2) { animation-delay: .08s; }
.fx-slide.active .fx-slide-copy > :nth-child(3) { animation-delay: .16s; }
.fx-slide.active .fx-slide-copy > :nth-child(4) { animation-delay: .24s; }
.fx-slide.active .fx-slide-media .cover { animation: fx-float-in .9s cubic-bezier(.2,.7,.2,1) both, fx-float 6s ease-in-out .9s infinite; }
@keyframes fx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fx-float-in { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ----------------------------------------------------------- micro motion */
.fx-tick { display: inline-block; animation: fx-tick .35s ease-out; }
@keyframes fx-tick { from { transform: translateY(-40%); opacity: .3; } to { transform: none; opacity: 1; } }
.btn-go > span { transition: transform .25s cubic-bezier(.2,1.4,.4,1); }
.btn-go:hover > span { transform: rotate(45deg); }
.round-img .cover.has-img img, .promo-img img, .fx-banner .cover img { transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.round-cat:hover .round-img img { transform: scale(1.08) rotate(-2deg); }
/* ================================================= header & main menu */
.hdr-grid .cell { position: relative; transition: color .25s, background .2s; }

/* active link = solid gradient pill; a light pill slides between links on hover */
.fx-nav { position: relative; }
.fx-nav > a.cell:not(.cell-deal) { z-index: 1; background: transparent; }
.fx-nav-ind {
  position: absolute; left: 0; top: 50%; height: 40px; margin-top: -20px; z-index: 0; pointer-events: none;
  border-radius: 999px; background: var(--paper-2); opacity: 0;
  box-shadow: inset 0 0 0 1px var(--bd);
  transition: transform .4s cubic-bezier(.3,1.25,.4,1), width .4s cubic-bezier(.3,1.25,.4,1), opacity .2s;
}
.fx-nav-ind.is-on:not(.is-active) { opacity: 1; }
.fx-nav-ind.no-anim { transition: none; }
.hdr-grid .cell.is-hot:not(.active) { color: var(--accent); }
.hdr-grid-inner > a.cell.active {
  color: #fff; font-weight: 800; padding: 0 18px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 16px rgba(var(--accent-rgb), .30), inset 0 1px 0 rgba(255,255,255,.25);
}
.hdr-grid-inner > a.cell.active:hover { color: #fff; filter: brightness(1.06); }

/* Today's Deals: its own glowing pill */
.hdr-grid .cell-deal {
  margin-left: 8px; padding: 0 16px; border-radius: 999px; gap: 7px;
  background: linear-gradient(135deg, #fff1f1, #ffe4e6); box-shadow: inset 0 0 0 1px rgba(229,72,77,.18);
  transition: transform .25s cubic-bezier(.2,1.4,.4,1), box-shadow .25s;
}
.hdr-grid .cell-deal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(229,72,77,.35), 0 8px 18px rgba(229,72,77,.18); background: linear-gradient(135deg, #ffe8e8, #ffd9dd); }
.cell-deal .ic { animation: fx-flame 1.6s ease-in-out infinite; transform-origin: 50% 90%; }

/* 24/7 Support: online dot + hover lift */
.hdr-support { padding: 6px 12px 6px 6px; margin-left: 10px; border-radius: 999px; transition: background .2s, transform .25s; }
.hdr-support:hover { background: var(--paper-2); transform: translateY(-1px); }
.hdr-support .hact-ic { position: relative; transition: background .2s, color .2s; }
.hdr-support:hover .hact-ic { background: var(--accent); color: #fff; }
.hdr-support .hact-ic::after {
  content: ""; position: absolute; right: 1px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; border: 2px solid #fff; animation: fx-online 2s ease-in-out infinite;
}
@keyframes fx-online { 0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow: 0 0 0 5px rgba(34,197,94,0); } }

/* header: glassy while scrolling, action icons bounce */
.site-header { transition: background .3s, box-shadow .3s; }
.site-header.scrolled { background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); }
.site-header.scrolled .hdr-grid { background: transparent; }
.hdr-grid { position: relative; }
.hdr-grid::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .35), rgba(var(--hi-rgb), .35), transparent);
}
.hact .hact-ic { transition: transform .3s cubic-bezier(.2,1.6,.4,1), background .2s, color .2s; }
.hact:hover .hact-ic { transform: translateY(-3px) scale(1.06); background: var(--accent); color: #fff; }
.hdr-grid .mega > .cell .ic:last-child { transition: transform .3s; }
.hdr-grid .mega.open > .cell .ic:last-child { transform: rotate(180deg); }
@keyframes fx-flame { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.18) rotate(-6deg); } }
.count:not(.is-zero) { animation: fx-pulse 2.4s ease-in-out infinite; }
@keyframes fx-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--hi-rgb), .45); } 50% { box-shadow: 0 0 0 6px rgba(var(--hi-rgb), 0); } }
.dropdown, .mega-panel, .search-suggest, .at-menu { transform-origin: top center; }
.toast { animation: fx-toast .4s cubic-bezier(.2,1.3,.4,1); }
@keyframes fx-toast { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------ page-leave loader */
.fx-loader {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 300; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--coral), var(--accent));
  background-size: 200% 100%; transform: scaleX(0); transform-origin: 0 50%; opacity: 0;
}
.fx-loader.is-on { opacity: 1; animation: fx-load 2.5s cubic-bezier(.1,.7,.2,1) forwards, fx-shine 1s linear infinite; }
@keyframes fx-load { from { transform: scaleX(0); } to { transform: scaleX(.85); } }
@keyframes fx-shine { from { background-position: 0 0; } to { background-position: -200% 0; } }

/* -------------------------------------------------- admin: draw charts */
.fx-draw .db-line { stroke-dasharray: 2400; stroke-dashoffset: 2400; }
.fx-in .fx-draw .db-line, .fx-draw.fx-ready-draw .db-line { animation: fx-dash 1.6s cubic-bezier(.3,.7,.2,1) .2s forwards; }
@keyframes fx-dash { to { stroke-dashoffset: 0; } }
.fx-in .db-donut-seg { animation: fx-donut 1.1s cubic-bezier(.3,.7,.2,1) both; }
@keyframes fx-donut { from { stroke-dasharray: 0 999; } }
.fx-in .db-bars em { animation: fx-grow 1s cubic-bezier(.2,.7,.2,1) .2s both; transform-origin: 0 50%; }
@keyframes fx-grow { from { transform: scaleX(0); } }
.fx-in .db-spark-line { stroke-dasharray: 400; animation: fx-spark-dash 1.4s ease-out .3s both; }
@keyframes fx-spark-dash { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } }
.db-kpi-ic, .db-quick span, .why span { transition: transform .3s cubic-bezier(.2,1.5,.4,1); }
.db-kpi:hover .db-kpi-ic, .db-quick a:hover span, .why:hover span { transform: scale(1.12) rotate(-6deg); }
.a-nav a .as-ic { transition: transform .25s, background .15s, color .15s; }
.a-nav a:hover .as-ic { transform: translateX(2px) scale(1.06); }

/* ---------------------------------------------------- respect the user */
@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .fx .fx-reveal { opacity: 1 !important; transform: none !important; }
  .fx-draw .db-line { stroke-dashoffset: 0; }
}

/* ==========================================================================
   Part 2 — richer motion (pairs with fx2.js)
   ========================================================================== */

/* 3D tilt + magnetic buttons */
.fx-tilting { transition: transform .12s ease-out, box-shadow .2s !important; will-change: transform; }
.pcard, .cat-tile, .promo, .deal-promo, .fx-post, .db-kpi, .earn { transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .2s; }
.fx-magnet { transition: transform .35s cubic-bezier(.2,1.4,.4,1), background .2s, box-shadow .2s; }

/* shine sweep across primary buttons */
.btn-primary, .btn-go, .pcard .btn-cart.btn-buy, .hdr-grid .mega > .cell { position: relative; overflow: hidden; }
.btn-primary::before, .btn-go::before, .pcard .btn-cart.btn-buy::before, .hdr-grid .mega > .cell::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.btn-primary:hover::before, .btn-go:hover::before, .pcard .btn-cart.btn-buy:hover::before, .hdr-grid .mega > .cell:hover::before { left: 130%; }

/* hero: floating blobs + mouse parallax depth */
.fx-hero { position: relative; overflow: hidden; isolation: isolate; }
.fx-hero::before, .fx-hero::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; pointer-events: none; z-index: -1;
  animation: fx-blob 14s ease-in-out infinite alternate;
}
.fx-hero::before { width: 360px; height: 360px; left: -80px; top: -60px; background: rgba(var(--accent-rgb), .35); }
.fx-hero::after { width: 300px; height: 300px; right: -60px; bottom: -80px; background: rgba(var(--hi-rgb), .35); animation-delay: -7s; }
@keyframes fx-blob { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.15); } 100% { transform: translate(-20px,50px) scale(.95); } }
.fx-slide-media { transform: translate(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -16px)); transition: transform .4s ease-out; }
.fx-slide-copy { transform: translate(calc(var(--px, 0) * 8px), calc(var(--py, 0) * 6px)); transition: transform .4s ease-out; }

/* scroll parallax */
.promo-img, .deal-promo-img, .fx-banner .cover { translate: 0 var(--sy, 0); }

/* headings: words rise one by one */
.fx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.fx-w > span { display: inline-block; transform: translateY(105%); transition: transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms); }
.fx-words-in .fx-w > span { transform: none; }
.fx-head h2::after, .band-tab h2::after, h2.fx-center::after, .newsletter h3::after { transition: width .8s cubic-bezier(.2,.7,.2,1) .35s; }
.fx-head h2[data-fx-split]:not(.fx-words-in)::after, .band-tab h2[data-fx-split]:not(.fx-words-in)::after,
h2.fx-center[data-fx-split]:not(.fx-words-in)::after, .newsletter h3[data-fx-split]:not(.fx-words-in)::after { width: 0 !important; }

/* endless platform ribbon */
.fx-ribbon { overflow: hidden; padding: 16px 0; border-block: 1px solid var(--bd); background: linear-gradient(90deg, var(--accent-soft), #fff 50%, var(--coral-soft));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx-ribbon-track { display: flex; width: max-content; animation: fx-marquee 32s linear infinite; }
.fx-ribbon:hover .fx-ribbon-track { animation-play-state: paused; }
.fx-ribbon-set { display: flex; gap: 46px; padding-right: 46px; }
.fx-ribbon span { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; color: var(--ink-soft); white-space: nowrap; }
.fx-ribbon span .ic { width: 18px; height: 18px; color: var(--accent); }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* round categories: spinning gradient ring */
.round-cat { position: relative; isolation: isolate; }
.round-img { position: relative; overflow: hidden; z-index: 1; }
.round-cat::before {
  content: ""; position: absolute; left: -4px; top: -4px; width: calc(100% + 8px); aspect-ratio: 1; border-radius: 50%; z-index: 0; opacity: 0;
  background: conic-gradient(var(--accent), var(--coral), #f5a524, var(--accent));
  transition: opacity .3s; animation: fx-spin 3s linear infinite;
}
.round-cat:hover::before { opacity: 1; }
.round-cat:hover .round-img { transform: none !important; }
.round-cat:hover .round-img { box-shadow: 0 14px 26px rgba(var(--accent-rgb), .16); }
@keyframes fx-spin { to { transform: rotate(1turn); } }

/* bands breathe */
.band-pink, .band-blue { background-size: 200% 200%; animation: fx-band 12s ease-in-out infinite alternate; }
.band-pink { background-image: linear-gradient(120deg, var(--pink), color-mix(in srgb, var(--pink) 60%, #fff), var(--pink)); }
.band-blue { background-image: linear-gradient(120deg, var(--sky), color-mix(in srgb, var(--sky) 60%, #fff), var(--sky)); }
@keyframes fx-band { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* "% OFF" tags: wiggle on card hover; offer badge glows */
.pcard:hover .tag-off, .pcard:hover .price-off { display: inline-block; animation: fx-wiggle .5s ease; }
@keyframes fx-wiggle { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.08); } 75% { transform: rotate(5deg); } }
.fx-offer span { animation: fx-glow 2.4s ease-in-out infinite; }
@keyframes fx-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(var(--hi-rgb), .5); } 50% { box-shadow: 0 0 0 7px rgba(var(--hi-rgb), 0); } }

/* product page zoom lens */
.fx-zoomable { cursor: zoom-in; overflow: hidden; }
.fx-zoomable img { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.fx-zooming img { transform: scale(1.9); }

/* header gets compact while scrolling */
.site-header .hdr-top { transition: height .3s ease; }
.site-header .logo .logo-text, .site-header .logo-icon { transition: transform .3s ease; transform-origin: left center; }
.site-header.fx-compact .hdr-top { height: 68px; }
.site-header.fx-compact .logo .logo-text { transform: scale(.92); }
.site-header.fx-compact .logo-icon { transform: scale(.88); }

/* menus cascade */
.fx-stagger { animation: fx-up .4s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--si, 0) * 35ms); }

/* confetti */
.fx-confetti { position: fixed; width: 8px; height: 12px; border-radius: 2px; z-index: 400; pointer-events: none; animation: fx-confetti 1.05s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes fx-confetti {
  0% { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--r)); opacity: 0; }
}

/* copied tick + toast timer */
.fx-copied { background: #e3f7ec !important; border-color: #1aa564 !important; color: #13804b !important; animation: fx-heart .4s ease; }
.toast { position: relative; overflow: hidden; }
.toast.show::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .35; transform-origin: 0 50%; animation: fx-toast-timer 3.8s linear forwards; }
@keyframes fx-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* admin welcome banner slowly shifts */
.db-hero { background-size: 160% 160%; animation: fx-band 10s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) {
  .fx-w > span { transform: none !important; }
  .fx-ribbon-track, .fx-hero::before, .fx-hero::after, .band-pink, .band-blue, .db-hero { animation: none !important; }
}
@media (max-width: 680px) {
  .fx-ribbon span { font-size: 14px; }
  .site-header.fx-compact .hdr-top { height: auto; }
}

/* Today's Deals when it is the current page */
.hdr-grid .cell-deal.active { color: #fff; background: linear-gradient(135deg, #e5484d, #ff6b6b); box-shadow: 0 6px 16px rgba(229,72,77,.32); }
.hdr-grid .cell-deal.active .ic { color: #fff; }

/* homepage without products: brand hero, icon banners and icon categories */
.fx-slide-brand .fx-brand-art { display: grid; place-items: center; }
.fx-brand-art img { width: min(260px, 70%); height: auto; filter: drop-shadow(0 24px 40px rgba(var(--accent-rgb), .28)); animation: fx-float 6s ease-in-out infinite; }
.fx-slide-brand .fx-offer span { display: inline-flex; align-items: center; gap: 4px; }
.fx-banner-icon { position: absolute; right: 22px; bottom: 18px; display: grid; place-items: center; width: 110px; height: 110px; border-radius: 30px; background: rgba(255,255,255,.65); color: var(--accent); transform: rotate(-8deg); transition: transform .3s; }
.fx-banner-icon .ic { width: 52px; height: 52px; }
.fx-banner:hover .fx-banner-icon { transform: rotate(-2deg) scale(1.06); }
.round-icon { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent); }
.round-icon .ic { width: 42%; height: 42%; }
.fx-slide-brand h2 { display: block; -webkit-line-clamp: unset; overflow: visible; }