/* ==========================================================================
   Previously — Unified browse styles · v20261002a (2026-10-02)
   --------------------------------------------------------------------------
   DESKTOP-FIRST. Designed for the laptop experience (1440px / 1920px),
   responsive down to phone. #UPON bar.

   - Content column: 1280px max, centered (1400px on very wide screens)
   - Cinematic hero: full-bleed backdrop inside the column, 540px tall
   - Grids: 6 columns at desktop, 8 at 1600px+
   - Rails: 5-6 visible cards, generous 200px cards
   - Hover: lift + glow + quick-info overlay (desktop has a cursor)
   - Type scale set for large screens, stepped down for mobile
   ========================================================================== */

/* ---------- page column ---------- */
.ub-wrap{
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 40px 70px;
}@media (min-width: 1900px){.ub-wrap{ max-width: 1760px; }
}.ub-title{
  font-size: clamp(34px, 3.4vw, 52px);
  letter-spacing: -0.02em;
  margin: 18px 0 8px;
  color: var(--pv-ivory, var(--desert-ink));
}.ub-wrap .pv-lede{
  font-size: 17px;
  line-height: 1.6;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  max-width: 720px;
  margin: 0 0 6px;
}/* ---------- tab toggle: Movies | TV Shows ---------- */
.ub-tabs{
  display: flex;
  gap: 36px;
  margin: 28px 0 8px;
  border-bottom: 1px solid rgba(var(--desert-ink-rgb), 0.12);
}.ub-tab{
  background: none;
  border: 0;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 14px 4px;
  margin-bottom: -1px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}.ub-tab:hover{ color: var(--pv-ivory, var(--desert-ink)); }.ub-tab.on{
  color: var(--pv-ivory, var(--desert-ink));
  border-bottom-color: var(--pv-red, var(--brand-red));
}/* ---------- cinematic hero (desktop) ---------- */
.ub-hero{
  position: relative;
  margin: 30px 0 10px;
  border-radius: 22px;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  background: var(--desert-pressed);
  border: 1px solid rgba(var(--desert-ink-rgb), 0.12);
  isolation: isolate;
}.ub-hero__bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}.ub-hero__shade{
  position: absolute;
  inset: 0;
  z-index: -1;
  /* approved Golden scrim: dark gradient over the photo, white text on top */
  background:
    linear-gradient(180deg, rgba(var(--scrim-black-rgb),0) 30%, rgba(var(--scrim-black-rgb),.72) 100%),
    linear-gradient(90deg, rgba(var(--scrim-black-rgb),.55) 0%, rgba(var(--scrim-black-rgb),0) 60%);
}.ub-hero__body{
  position: relative;
  padding: 52px 56px;
  max-width: 700px;
}.ub-hero__title{
  /* Unified hero treatment (James 2026-10-15): family/weight/transform
     pinned on the element itself, so the Movies and TV heroes share one
     treatment and cannot drift apart through inheritance again. */
  font-family: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: none;
  font-size: clamp(42px, 4.6vw, 72px);
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 14px 0 10px;
  color: var(--desert-card);
  text-shadow: 0 1px 8px rgba(var(--scrim-black-rgb),.5);
  text-wrap: balance;
}.ub-hero__meta{
  font-family: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: rgba(var(--desert-card-rgb),.78);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
  text-shadow: 0 1px 6px rgba(var(--scrim-black-rgb),.5);
}.ub-hero__ov{
  font-family: 'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: rgba(var(--desert-card-rgb),.72);
  font-size: 17px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 6px;
  text-shadow: 0 1px 6px rgba(var(--scrim-black-rgb),.5);
}.ub-cta{
  display: inline-block;
  margin-top: 20px;
  background: var(--pv-red, var(--brand-red));
  color: var(--desert-bg);
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
}.ub-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--desert-ink-rgb), 0.22);
}/* ---------- hero rotation (2026-10-13) ---------- */
.ub-hero{ transition: opacity .23s ease; }
.ub-hero--fade{ opacity: 0; }
@media (prefers-reduced-motion: reduce){
  .ub-hero{ transition: none; }
}/* ---------- search ---------- */
.ub-search{ margin: 44px 0 8px; }.ub-sbar{ display: flex; gap: 12px; max-width: 760px; }.ub-sbar input{
  flex: 1;
  background: transparent;
  border: 1px solid rgba(var(--desert-ink-rgb), .18);
  color: var(--pv-ivory, var(--desert-ink));
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 17px;
  min-width: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}.ub-sbar input::placeholder{ color: rgba(var(--desert-ink-rgb), .45); }.ub-sbar input:focus{
  outline: none;
  border-color: var(--pv-red, var(--brand-red));
  box-shadow: 0 0 0 3px rgba(var(--brand-red-rgb), 0.18);
}.ub-sbar button{
  background: var(--pv-red, var(--brand-red));
  border: 0;
  color: var(--desert-card);
  border-radius: 14px;
  padding: 0 32px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s, filter 0.2s;
}.ub-sbar button:hover{ filter: brightness(1.1); transform: translateY(-1px); }.ub-snote{ color: var(--pv-ivory-dim, var(--desert-ink-dim)); font-size: 14px; margin-top: 12px; }#ubSearchResults{ margin-top: 22px; }/* ---------- section heads ---------- */
.ub-sec-head{ margin: 52px 0 20px; }.ub-h2{
  font-size: clamp(26px, 2.4vw, 34px);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  color: var(--pv-ivory, var(--desert-ink));
}.ub-secsub{
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  font-size: 15px;
  margin: 0;
}/* ---------- grid: 6 cols desktop, 8 at 1600px+ ---------- */
.ub-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px 22px;
}@media (min-width: 1400px){.ub-grid{ grid-template-columns: repeat(7, 1fr); }
}@media (min-width: 1600px){.ub-grid{ grid-template-columns: repeat(8, 1fr); }
}@media (min-width: 2000px){.ub-grid{ grid-template-columns: repeat(10, 1fr); }
}/* ---------- rail: generous desktop cards ---------- */
.ub-rail{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
  gap: 22px;
  overflow-x: auto;
  padding: 6px 4px 22px;
  scrollbar-width: thin;
  scrollbar-color: var(--desert-pressed) transparent;
  -webkit-overflow-scrolling: touch;
}.ub-rail::-webkit-scrollbar{ height: 8px; }.ub-rail::-webkit-scrollbar-thumb{ background: var(--desert-pressed); border-radius: 4px; }/* ---------- cards + rich hover (desktop) ---------- */
.ub-grid .mcard, .ub-rail .mcard, #ubSearchResults .mcard{
  text-decoration: none;
  color: var(--pv-ivory, var(--desert-ink));
  display: block;
  position: relative;
  border-radius: 12px;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s;
}.ub-grid .mcard:hover, .ub-rail .mcard:hover, #ubSearchResults .mcard:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 18px 44px rgba(var(--desert-shadow-rgb), 0.55),
    0 0 0 1px rgba(var(--brand-red-rgb), 0.35),
    0 0 32px rgba(var(--brand-red-rgb), 0.12);
  z-index: 2;
}.ub-grid .mcard__art, .ub-rail .mcard__art, #ubSearchResults .mcard__art{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--desert-pressed);
  aspect-ratio: 2/3;
  position: relative;
}.ub-grid .mcard__art img, .ub-rail .mcard__art img, #ubSearchResults .mcard__art img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}.ub-grid .mcard:hover .mcard__art img,
.ub-rail .mcard:hover .mcard__art img,
#ubSearchResults .mcard:hover .mcard__art img{
  transform: scale(1.06);
}/* quick-info overlay on hover */
.ub-grid .mcard__art::after, .ub-rail .mcard__art::after, #ubSearchResults .mcard__art::after{
  content: "View details \2192";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 34px 14px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--desert-card);
  background: linear-gradient(0deg, rgba(var(--desert-ink-rgb), 0.92), rgba(var(--desert-ink-rgb), 0));
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: none;
}.ub-grid .mcard:hover .mcard__art::after,
.ub-rail .mcard:hover .mcard__art::after,
#ubSearchResults .mcard:hover .mcard__art::after{
  opacity: 1;
  transform: translateY(0);
}.ub-grid .mcard__name, .ub-rail .mcard__name, #ubSearchResults .mcard__name{
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
  line-height: 1.35;
  transition: color 0.2s;
}.ub-grid .mcard:hover .mcard__name,
.ub-rail .mcard:hover .mcard__name,
#ubSearchResults .mcard:hover .mcard__name{
  color: var(--pv-red, var(--brand-red));
}.ub-grid .mcard__meta, .ub-rail .mcard__meta, #ubSearchResults .mcard__meta{
  display: block;
  font-size: 13px;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  margin-top: 4px;
  text-wrap: pretty;
}.mcard__noposter{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  font-size: 56px;
  font-weight: 800;
  color: rgba(var(--desert-ink-rgb), .35);
}/* ---------- genre filter row (intentional, not stacked) ---------- */
.ub-genres{ margin-top: 52px; }.ub-gchips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 10px 2px 20px;
  border-bottom: 1px solid rgba(var(--desert-ink-rgb), 0.08);
  margin-bottom: 26px;
}.ub-gchip{
  background: none;
  border: 0;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 8px 2px;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}.ub-gchip:hover{ color: var(--pv-ivory, var(--desert-ink)); }.ub-gchip.on{
  color: var(--pv-ivory, var(--desert-ink));
  border-bottom-color: var(--pv-red, var(--brand-red));
}.ub-genre-name{
  font-size: 15px;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  margin: -14px 0 20px;
}.ub-genre-name strong{ color: var(--pv-ivory, var(--desert-ink)); }/* ---------- states ---------- */
.ub-loading{
  min-height: 140px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--desert-card) 40%, var(--desert-pressed) 50%, var(--desert-card) 60%);
  background-size: 200% 100%;
  animation: ubshimmer 1.4s infinite;
}.ub-grid .ub-loading{ grid-column: 1 / -1; }@keyframes ubshimmer{to{ background-position: -200% 0; } }@media (prefers-reduced-motion: reduce){.ub-loading{ animation: none; }.ub-grid .mcard, .ub-rail .mcard{ transition: none; }
}.ub-err{ text-align: center; padding: 40px 20px; color: var(--pv-ivory-dim, var(--desert-ink-dim)); }.ub-err button{
  margin-top: 14px;
  background: none;
  border: 1px solid var(--pv-red, var(--brand-red));
  color: var(--pv-red, var(--brand-red));
  border-radius: 6px;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}.ub-err button:hover{ background: var(--pv-red, var(--brand-red)); color: var(--desert-card); }.ub-attr{
  margin: 60px 0 30px;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  font-size: 13px;
  text-align: center;
}.ub-attr a{ color: var(--pv-ivory-dim, var(--desert-ink-dim)); }/* ---------- tablet ---------- */
@media (max-width: 1024px){
  .ub-wrap { padding: 0 28px 60px; }
  .ub-grid { grid-template-columns: repeat(4, 1fr); gap: 22px 18px; }
  .ub-rail { grid-auto-columns: 170px; }
  .ub-hero { min-height: 440px; }
  .ub-hero__body { padding: 40px; }
}/* ---------- phone ---------- */
@media (max-width: 640px){
  .ub-wrap { padding: 0 18px 50px; }
  .ub-tabs { gap: 24px; }
  .ub-tab { font-size: 18px; }
  .ub-hero { min-height: 400px; border-radius: 16px; }
  .ub-hero__body { padding: 26px 22px; }
  .ub-hero__title { font-size: clamp(30px, 8vw, 42px); }
  .ub-hero__ov { font-size: 14px; -webkit-line-clamp: 2; }
  .ub-sbar { flex-direction: column; }
  .ub-sbar button { padding: 14px; }
  .ub-grid { grid-template-columns: repeat(3, 1fr); gap: 16px 12px; }
  .ub-rail { grid-auto-columns: 130px; gap: 14px; }
  .ub-sec-head { margin: 38px 0 16px; }
  /* hover overlays off on touch */
  .ub-grid .mcard__art::after, .ub-rail .mcard__art::after { display: none; }
}/* ================= TOP 10 — James 2026-10-11, layout fix 2026-10-12 ==
   Netflix-style ranked list. Uniform 2:3 posters (no size drift),
   large rank numbers, works mobile + desktop.
   FIX 2026-10-12: the rank was bottom-aligned at text level with a 4px
   gap, so the giant numeral crowded into the title + date/rating lines.
   Now the rank centers against the poster with real breathing room, and
   the card text gets the same name/meta treatment as grid cards. */
.ub-top10 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 28px 22px;
  margin-top: 8px;
}
.ub-top10__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.ub-top10__rank {
  font-size: clamp(60px, 6.5vw, 96px);
  font-weight: 900;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 2px var(--pv-ivory, #f5f0e6);
  flex: none;
  user-select: none;
}
.ub-top10__item .mcard,
.ub-top10__item .tvcard {
  flex: 1;
  min-width: 0;
}
/* card text: title on its own line, date · rating on the next — never cut */
.ub-top10 .mcard__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 10px;
  line-height: 1.35;
}
.ub-top10 .mcard__meta {
  display: block;
  font-size: 13px;
  color: var(--pv-ivory-dim, var(--desert-ink-dim));
  margin-top: 4px;
  text-wrap: pretty;
}
/* Force uniform poster sizing — James: no card size drift.
   FIX 2026-10-12 (stretched Top-10 posters): this block previously sized
   only the __art WRAPPER — object-fit is a no-op on a span, and the <img>
   itself had no rule in .ub-top10 scope, so its width/height attributes
   (342x513) set the box: max-width clamped the width while the height
   stayed 513px, and the default object-fit:fill stretched every poster
   into a tall skinny column. The img rules below give Top-10 posters the
   same 100%/100%/cover treatment the grid/rail scopes already had. */
.ub-top10 .mcard__art,
.ub-top10 .tvcard__art { width: 100% !important;
  aspect-ratio: 2/3 !important;
  overflow: hidden;
  display: block; }

.ub-top10 .mcard__art img,
.ub-top10 .tvcard__art img { width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block; }
/* Also enforce on regular grids and rails */
.ub-grid .mcard__art,
.ub-grid .tvcard__art,
.ub-rail .mcard__art,
.ub-rail .tvcard__art {
  width: 100% !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
  display: block;
}
@media (max-width: 1024px) {
  .ub-top10 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .ub-top10 { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .ub-top10__item { gap: 10px; }
  .ub-top10__rank { font-size: 64px; }
}

/* ---------- Top-10 card parity (title-format pass 2026-10-12) ----------
   Root cause of the "one long underlined string" in the ranked grid: the
   base card rules set text-decoration:none only for .ub-grid/.ub-rail/
   #ubSearchResults cards — Top-10 cards were never covered, so the whole
   anchor (title AND date/rating meta) rendered underlined. Titles are the
   link; the meta line is plain meta text, matching grid/rail cards. */
.ub-top10 .mcard, .ub-top10 .tvcard{
  text-decoration: none;
  color: var(--pv-ivory, var(--desert-ink));
  display: block;
  position: relative;
}
.ub-top10 .mcard__meta, .ub-top10 .tvcard__meta{ text-decoration: none; }
.ub-top10 .mcard:hover .mcard__name, .ub-top10 .tvcard:hover .tvcard__name{
  color: var(--pv-red, var(--brand-red));
}

/* ---------- rounder poster cards + watch-free furniture (2026-10-14 bunch build) ----------
   James: thumbnails should not read as perfect squares — 20px corners on
   every poster card on Browse, both tabs; the art and the hover shadow
   follow the card radius. Supersedes the 12px values above by cascade. */
/* Specificity note: /css/wave2-fronts.css loads after this sheet and
   flattens these same scopes to radius 0 (Editorial Standard card
   treatment: cream ground + rule border — that part stays). The
   .ub-wrap prefix lifts this radius rule above it, per James's
   2026-10-14 rounder-thumbnails ruling. */
.ub-wrap .ub-grid .mcard, .ub-wrap .ub-rail .mcard, .ub-wrap #ubSearchResults .mcard, .ub-wrap .ub-top10 .mcard,
.ub-wrap .ub-grid .tvcard, .ub-wrap .ub-rail .tvcard, .ub-wrap #ubSearchResults .tvcard, .ub-wrap .ub-top10 .tvcard{
  border-radius: 20px;
}
.ub-wrap .ub-grid .mcard__art, .ub-wrap .ub-rail .mcard__art, .ub-wrap #ubSearchResults .mcard__art, .ub-wrap .ub-top10 .mcard__art,
.ub-wrap .ub-grid .tvcard__art, .ub-wrap .ub-rail .tvcard__art, .ub-wrap #ubSearchResults .tvcard__art, .ub-wrap .ub-top10 .tvcard__art{
  border-radius: 20px;
}
.ub-wrap .ub-loading{ border-radius: 20px; }
/* watch-free rail (folded in from the retired /movie/ page) */
#ubFreeSection .ub-sec-head{ margin-bottom: 4px; }
.ub-free-more{ margin: 2px 0 0; font-size: 15px; font-weight: 700; }
.ub-free-more a{ color:#C0391B; text-decoration: none; }
.ub-free-more a:hover{ text-decoration: underline; }

/* ---------- browse cards: kill the white box (2026-10-14 nobox) ----------
   James, from his phone on the Movies tab: the poster cards sit in a
   white box — "can that be transparent... I just want it to flow, the
   title just sit on the screen." The box is wave2-fronts.css's Editorial
   card paint (#FFFDF8 ground + 1px hairline border, specificity (0,2,0),
   and that sheet loads after this one). The .ub-wrap prefix (0,3,0)
   lifts these rules above it — same technique as the 20px radius block
   above. Card body: transparent background, no border, no shadow. The
   rounded poster art (20px) carries each card; name + meta sit directly
   on the cream page ground. Padding/margins are untouched, so titles
   align exactly as before. Top 10 was never boxed — it is included
   defensively so it can never grow a box inside .ub-wrap.
   Hover: the lift (transform) stays on the card, but the hover shadow
   belonged to the box (card-level) — it MOVES to the poster art, so the
   glow hugs the artwork instead of outlining an invisible rectangle
   that runs under the title text. */
.ub-wrap .ub-grid .mcard, .ub-wrap .ub-rail .mcard, .ub-wrap #ubSearchResults .mcard, .ub-wrap .ub-top10 .mcard, .ub-wrap #ubFreeSection .mcard,
.ub-wrap .ub-grid .tvcard, .ub-wrap .ub-rail .tvcard, .ub-wrap #ubSearchResults .tvcard, .ub-wrap .ub-top10 .tvcard, .ub-wrap #ubFreeSection .tvcard{
  background: transparent;
  border: 0;
  box-shadow: none;
}
.ub-wrap .ub-grid .mcard:hover, .ub-wrap .ub-rail .mcard:hover, .ub-wrap #ubSearchResults .mcard:hover, .ub-wrap #ubFreeSection .mcard:hover,
.ub-wrap .ub-grid .tvcard:hover, .ub-wrap .ub-rail .tvcard:hover, .ub-wrap #ubSearchResults .tvcard:hover, .ub-wrap #ubFreeSection .tvcard:hover{
  box-shadow: none;
}
.ub-wrap .ub-grid .mcard__art, .ub-wrap .ub-rail .mcard__art, .ub-wrap #ubSearchResults .mcard__art, .ub-wrap #ubFreeSection .mcard__art,
.ub-wrap .ub-grid .tvcard__art, .ub-wrap .ub-rail .tvcard__art, .ub-wrap #ubSearchResults .tvcard__art, .ub-wrap #ubFreeSection .tvcard__art{
  transition: box-shadow 0.25s;
}
.ub-wrap .ub-grid .mcard:hover .mcard__art, .ub-wrap .ub-rail .mcard:hover .mcard__art, .ub-wrap #ubSearchResults .mcard:hover .mcard__art, .ub-wrap #ubFreeSection .mcard:hover .mcard__art,
.ub-wrap .ub-grid .tvcard:hover .tvcard__art, .ub-wrap .ub-rail .tvcard:hover .tvcard__art, .ub-wrap #ubSearchResults .tvcard:hover .tvcard__art, .ub-wrap #ubFreeSection .tvcard:hover .tvcard__art{
  box-shadow:
    0 18px 44px rgba(var(--desert-shadow-rgb), 0.55),
    0 0 0 1px rgba(var(--brand-red-rgb), 0.35),
    0 0 32px rgba(var(--brand-red-rgb), 0.12);
}
@media (prefers-reduced-motion: reduce){
  .ub-wrap .ub-grid .mcard__art, .ub-wrap .ub-rail .mcard__art, .ub-wrap #ubSearchResults .mcard__art, .ub-wrap #ubFreeSection .mcard__art,
  .ub-wrap .ub-grid .tvcard__art, .ub-wrap .ub-rail .tvcard__art, .ub-wrap #ubSearchResults .tvcard__art, .ub-wrap #ubFreeSection .tvcard__art{
    transition: none;
  }
}